diff --git a/apps/web/src/__generated__/questions/coding/list.en-US.json b/apps/web/src/__generated__/questions/coding/list.en-US.json
index e18dd7fe3..63068fb14 100644
--- a/apps/web/src/__generated__/questions/coding/list.en-US.json
+++ b/apps/web/src/__generated__/questions/coding/list.en-US.json
@@ -1,6 +1,6 @@
 [
   {
-    "access": "free",
+    "access": "premium",
     "author": "yangshun",
     "companies": [],
     "created": 1671580800,
@@ -36,7 +36,9 @@
     "slug": "accordion",
     "subtitle": null,
     "title": "Accordion",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -74,7 +76,9 @@
     "slug": "accordion-ii",
     "subtitle": null,
     "title": "Accordion II",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -106,7 +110,9 @@
     "slug": "accordion-iii",
     "subtitle": null,
     "title": "Accordion III",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -159,7 +165,10 @@
     "slug": "analog-clock",
     "subtitle": null,
     "title": "Analog Clock",
-    "topics": []
+    "topics": [
+      "a11y",
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -405,7 +414,9 @@
     "slug": "auth-code-input",
     "subtitle": null,
     "title": "Auth Code Input",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -427,9 +438,7 @@
       "js",
       "ts"
     ],
-    "nextQuestions": [
-      ""
-    ],
+    "nextQuestions": [],
     "published": true,
     "ranking": 100,
     "similarQuestions": [
@@ -439,7 +448,9 @@
     "slug": "backbone-model",
     "subtitle": null,
     "title": "Backbone Model",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   {
     "access": "free",
@@ -576,7 +587,9 @@
     "slug": "camel-case-keys",
     "subtitle": null,
     "title": "Camel Case Keys",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -605,7 +618,9 @@
     "slug": "cancellable-interval",
     "subtitle": null,
     "title": "Cancellable Interval",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -634,7 +649,9 @@
     "slug": "cancellable-timeout",
     "subtitle": null,
     "title": "Cancellable Timeout",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -966,7 +983,9 @@
     "slug": "contact-form",
     "subtitle": null,
     "title": "Contact Form",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "free",
@@ -1176,7 +1195,9 @@
     "slug": "cycle",
     "subtitle": null,
     "title": "Cycle",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -1416,7 +1437,9 @@
     "slug": "debounce",
     "subtitle": null,
     "title": "Debounce",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -1454,7 +1477,9 @@
     "slug": "debounce-ii",
     "subtitle": null,
     "title": "Debounce II",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "free",
@@ -1490,7 +1515,9 @@
     "slug": "deep-clone",
     "subtitle": null,
     "title": "Deep Clone",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1519,7 +1546,9 @@
     "slug": "deep-clone-ii",
     "subtitle": null,
     "title": "Deep Clone II",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1551,7 +1580,9 @@
     "slug": "deep-equal",
     "subtitle": null,
     "title": "Deep Equal",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1581,7 +1612,9 @@
     "slug": "deep-map",
     "subtitle": null,
     "title": "Deep Map",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1610,7 +1643,9 @@
     "slug": "deep-merge",
     "subtitle": null,
     "title": "Deep Merge",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1639,7 +1674,9 @@
     "slug": "deep-omit",
     "subtitle": null,
     "title": "Deep Omit",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "free",
@@ -1713,7 +1750,9 @@
     "slug": "dice-roller",
     "subtitle": null,
     "title": "Dice Roller",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -1795,7 +1834,10 @@
     "slug": "digital-clock",
     "subtitle": null,
     "title": "Digital Clock",
-    "topics": []
+    "topics": [
+      "a11y",
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -1890,7 +1932,9 @@
     "slug": "event-emitter",
     "subtitle": null,
     "title": "Event Emitter",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   {
     "access": "premium",
@@ -1926,7 +1970,9 @@
     "slug": "event-emitter-ii",
     "subtitle": null,
     "title": "Event Emitter II",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   {
     "access": "free",
@@ -1968,7 +2014,9 @@
     "slug": "file-explorer",
     "subtitle": null,
     "title": "File Explorer",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -2038,7 +2086,7 @@
       "js"
     ],
     "nextQuestions": [
-      "file-explorer-iii"
+      "nested-checkboxes"
     ],
     "published": true,
     "ranking": 100,
@@ -2172,7 +2220,9 @@
     "slug": "flatten",
     "subtitle": null,
     "title": "Flatten",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -2190,6 +2240,10 @@
         "framework": "react",
         "href": "/questions/user-interface/flight-booker/react"
       },
+      {
+        "framework": "vanilla",
+        "href": "/questions/user-interface/flight-booker/vanilla"
+      },
       {
         "framework": "angular",
         "href": "/questions/user-interface/flight-booker/angular"
@@ -2216,7 +2270,9 @@
     "slug": "flight-booker",
     "subtitle": null,
     "title": "Flight Booker",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -2450,7 +2506,9 @@
     "slug": "get",
     "subtitle": null,
     "title": "Get",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -2486,7 +2544,9 @@
     "slug": "get-elements-by-class-name",
     "subtitle": null,
     "title": "getElementsByClassName",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -2520,7 +2580,9 @@
     "slug": "get-elements-by-style",
     "subtitle": null,
     "title": "getElementsByStyle",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -2553,7 +2615,9 @@
     "slug": "get-elements-by-tag-name",
     "subtitle": null,
     "title": "getElementsByTagName",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -2587,7 +2651,9 @@
     "slug": "get-elements-by-tag-name-hierarchy",
     "subtitle": null,
     "title": "getElementsByTagNameHierarchy",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -2634,7 +2700,10 @@
     "slug": "grid-lights",
     "subtitle": null,
     "title": "Grid Lights",
-    "topics": []
+    "topics": [
+      "a11y",
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2780,7 +2849,9 @@
     "slug": "html-serializer",
     "subtitle": null,
     "title": "HTML Serializer",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -2810,7 +2881,11 @@
     "slug": "identical-dom-trees",
     "subtitle": null,
     "title": "Identical DOM Trees",
-    "topics": []
+    "topics": [
+      "recursion",
+      "tree",
+      "web-api"
+    ]
   },
   {
     "access": "free",
@@ -2854,7 +2929,9 @@
     "slug": "image-carousel",
     "subtitle": null,
     "title": "Image Carousel",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -2897,7 +2974,9 @@
     "slug": "image-carousel-ii",
     "subtitle": null,
     "title": "Image Carousel II",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -3167,7 +3246,9 @@
     "slug": "job-board",
     "subtitle": null,
     "title": "Job Board",
-    "topics": []
+    "topics": [
+      "networking"
+    ]
   },
   {
     "access": "premium",
@@ -3198,7 +3279,10 @@
     "slug": "jquery-class-manipulation",
     "subtitle": null,
     "title": "jQuery Class Manipulation",
-    "topics": []
+    "topics": [
+      "oop",
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -3229,7 +3313,10 @@
     "slug": "jquery-css",
     "subtitle": null,
     "title": "jQuery.css",
-    "topics": []
+    "topics": [
+      "oop",
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -3262,7 +3349,9 @@
     "slug": "json-stringify",
     "subtitle": null,
     "title": "JSON.stringify",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -3293,7 +3382,9 @@
     "slug": "json-stringify-ii",
     "subtitle": null,
     "title": "JSON.stringify II",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -3340,7 +3431,10 @@
     "slug": "like-button",
     "subtitle": null,
     "title": "Like Button",
-    "topics": []
+    "topics": [
+      "async",
+      "networking"
+    ]
   },
   {
     "access": "premium",
@@ -3431,7 +3525,9 @@
     "slug": "make-counter",
     "subtitle": null,
     "title": "Make Counter",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -3463,7 +3559,9 @@
     "slug": "make-counter-ii",
     "subtitle": null,
     "title": "Make Counter II",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -3498,7 +3596,9 @@
     "slug": "map-async",
     "subtitle": null,
     "title": "Map Async",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -3531,7 +3631,9 @@
     "slug": "map-async-limit",
     "subtitle": null,
     "title": "Map Async Limit",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -3790,7 +3892,9 @@
     "slug": "modal-dialog",
     "subtitle": null,
     "title": "Modal Dialog",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -3827,7 +3931,9 @@
     "slug": "modal-dialog-ii",
     "subtitle": null,
     "title": "Modal Dialog II",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -3863,7 +3969,9 @@
     "slug": "modal-dialog-iii",
     "subtitle": null,
     "title": "Modal Dialog III",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -3897,7 +4005,9 @@
     "slug": "modal-dialog-iv",
     "subtitle": null,
     "title": "Modal Dialog IV",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "free",
@@ -4075,7 +4185,9 @@
     "slug": "once",
     "subtitle": null,
     "title": "Once",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -4120,7 +4232,9 @@
     "slug": "pixel-art",
     "subtitle": null,
     "title": "Pixel Art",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -4202,7 +4316,9 @@
     "slug": "progress-bars",
     "subtitle": null,
     "title": "Progress Bars",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4239,7 +4355,9 @@
     "slug": "progress-bars-ii",
     "subtitle": null,
     "title": "Progress Bars II",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4276,7 +4394,9 @@
     "slug": "progress-bars-iii",
     "subtitle": null,
     "title": "Progress Bars III",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4311,7 +4431,9 @@
     "slug": "progress-bars-iv",
     "subtitle": null,
     "title": "Progress Bars IV",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4343,7 +4465,9 @@
     "slug": "promise-merge",
     "subtitle": null,
     "title": "Promise Merge",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4370,7 +4494,9 @@
     "slug": "promise-timeout",
     "subtitle": null,
     "title": "Promise Timeout",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "free",
@@ -4411,7 +4537,9 @@
     "slug": "promise-all",
     "subtitle": null,
     "title": "Promise.all",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4442,7 +4570,9 @@
     "slug": "promise-all-settled",
     "subtitle": null,
     "title": "Promise.allSettled",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4473,7 +4603,9 @@
     "slug": "promise-any",
     "subtitle": null,
     "title": "Promise.any",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4506,7 +4638,9 @@
     "slug": "promise-race",
     "subtitle": null,
     "title": "Promise.race",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4539,7 +4673,9 @@
     "slug": "promise-reject",
     "subtitle": null,
     "title": "Promise.reject",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4572,7 +4708,9 @@
     "slug": "promise-resolve",
     "subtitle": null,
     "title": "Promise.resolve",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4602,7 +4740,9 @@
     "slug": "promise-with-resolvers",
     "subtitle": null,
     "title": "Promise.withResolvers",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4633,7 +4773,9 @@
     "slug": "promisify",
     "subtitle": null,
     "title": "Promisify",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -4660,7 +4802,9 @@
     "slug": "promisify-ii",
     "subtitle": null,
     "title": "Promisify II",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "free",
@@ -4811,7 +4955,10 @@
     "slug": "resumable-interval",
     "subtitle": null,
     "title": "Resumable Interval",
-    "topics": []
+    "topics": [
+      "async",
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -4993,7 +5140,9 @@
     "slug": "sleep",
     "subtitle": null,
     "title": "Sleep",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -5023,7 +5172,9 @@
     "slug": "squash-object",
     "subtitle": null,
     "title": "Squash Object",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "free",
@@ -5159,7 +5310,9 @@
     "slug": "stopwatch",
     "subtitle": null,
     "title": "Stopwatch",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -5191,7 +5344,9 @@
     "slug": "sum",
     "subtitle": null,
     "title": "Sum",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -5221,7 +5376,11 @@
     "slug": "table-of-contents",
     "subtitle": null,
     "title": "Table of Contents",
-    "topics": []
+    "topics": [
+      "recursion",
+      "tree",
+      "web-api"
+    ]
   },
   {
     "access": "free",
@@ -5271,7 +5430,9 @@
     "slug": "tabs",
     "subtitle": null,
     "title": "Tabs",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -5321,7 +5482,9 @@
     "slug": "tabs-ii",
     "subtitle": null,
     "title": "Tabs II",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -5364,7 +5527,9 @@
     "slug": "tabs-iii",
     "subtitle": null,
     "title": "Tabs III",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -5512,7 +5677,9 @@
     "slug": "throttle",
     "subtitle": null,
     "title": "Throttle",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -5564,7 +5731,9 @@
     "slug": "tic-tac-toe",
     "subtitle": null,
     "title": "Tic-tac-toe",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -5614,7 +5783,9 @@
     "slug": "tic-tac-toe-ii",
     "subtitle": null,
     "title": "Tic-tac-toe II",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "free",
@@ -5755,7 +5926,9 @@
     "slug": "traffic-light",
     "subtitle": null,
     "title": "Traffic Light",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -5881,7 +6054,9 @@
     "slug": "turtle",
     "subtitle": null,
     "title": "Turtle",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   {
     "access": "premium",
diff --git a/apps/web/src/__generated__/questions/javascript/backbone-model/en-US.json b/apps/web/src/__generated__/questions/javascript/backbone-model/en-US.json
index e2e3920c7..51234ba34 100644
--- a/apps/web/src/__generated__/questions/javascript/backbone-model/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/backbone-model/en-US.json
@@ -28,9 +28,7 @@
       "js",
       "ts"
     ],
-    "nextQuestions": [
-      ""
-    ],
+    "nextQuestions": [],
     "published": true,
     "ranking": 100,
     "similarQuestions": [
@@ -40,7 +38,9 @@
     "slug": "backbone-model",
     "subtitle": null,
     "title": "Backbone Model",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   "skeleton": {
     "js": "// You are free to use alternative approaches of\n// defining BackboneModel as long as the\n// default export can be instantiated.\nexport default class BackboneModel {\n  /**\n   * @param {Object} initialValues\n   * @returns BackboneModel\n   */\n  constructor(initialValues) {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * Get the value of a specific attribute.\n   * @param {string} attribute - The attribute name.\n   * @returns {any | undefined} The value of the attribute.\n   */\n  get(attribute) {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * Set the value of a specific attribute.\n   * @param {string} attribute - The attribute name.\n   * @param {any} value - The value to set for the attribute.\n   */\n  set(attribute, value) {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * Check if the model has a specific attribute.\n   * @param {string} attribute - The attribute name.\n   * @returns {boolean} `true` if the model has the attribute, `false` otherwise.\n   */\n  has(attribute) {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * Unset a specific attribute.\n   * @param {string} attribute - The attribute name to unset.\n   */\n  unset(attribute) {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * Register an event listener for changes to a specific attribute.\n   * @param {string} eventName - The event name.\n   * @param {string} attribute - The attribute name to listen for changes.\n   * @param {Function} callback - The callback function to be executed on the event.\n   * @param {any} [context] - The context in which to execute the callback.\n   */\n  on(eventName, attribute, callback, context) {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * Remove an event listener for changes to a specific attribute.\n   * @param {string} eventName - The event name.\n   * @param {string} attribute - The attribute name to stop listening for changes.\n   * @param {Function} callback - The callback function to remove.\n   */\n  off(eventName, attribute, callback) {\n    throw 'Not implemented!';\n  }\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/camel-case-keys/en-US.json b/apps/web/src/__generated__/questions/javascript/camel-case-keys/en-US.json
index f5450d13a..41e59e467 100644
--- a/apps/web/src/__generated__/questions/javascript/camel-case-keys/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/camel-case-keys/en-US.json
@@ -36,7 +36,9 @@
     "slug": "camel-case-keys",
     "subtitle": null,
     "title": "Camel Case Keys",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param Object\n * @return Object\n */\nexport default function camelCaseKeys(object) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/cancellable-interval/en-US.json b/apps/web/src/__generated__/questions/javascript/cancellable-interval/en-US.json
index 644f8b780..01ff1e076 100644
--- a/apps/web/src/__generated__/questions/javascript/cancellable-interval/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/cancellable-interval/en-US.json
@@ -35,7 +35,9 @@
     "slug": "cancellable-interval",
     "subtitle": null,
     "title": "Cancellable Interval",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Function} callback\n * @param {number} delay\n * @param {...any} args\n * @returns {Function}\n */\nexport default function setCancellableInterval(callback, delay, ...args) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/cancellable-timeout/en-US.json b/apps/web/src/__generated__/questions/javascript/cancellable-timeout/en-US.json
index 931b7e135..ebca9af4c 100644
--- a/apps/web/src/__generated__/questions/javascript/cancellable-timeout/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/cancellable-timeout/en-US.json
@@ -35,7 +35,9 @@
     "slug": "cancellable-timeout",
     "subtitle": null,
     "title": "Cancellable Timeout",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Function} callback\n * @param {number} delay\n * @param {...any} args\n * @returns {Function}\n */\nexport default function setCancellableTimeout(callback, delay, ...args) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/cycle/en-US.json b/apps/web/src/__generated__/questions/javascript/cycle/en-US.json
index 92ea274cb..438cb89dd 100644
--- a/apps/web/src/__generated__/questions/javascript/cycle/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/cycle/en-US.json
@@ -33,7 +33,9 @@
     "slug": "cycle",
     "subtitle": null,
     "title": "Cycle",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @template T\n * @param  {...T} values\n *\n * @returns () => T\n */\nexport default function cycle(...values) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/debounce-ii/en-US.json b/apps/web/src/__generated__/questions/javascript/debounce-ii/en-US.json
index e638ab667..89b8514af 100644
--- a/apps/web/src/__generated__/questions/javascript/debounce-ii/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/debounce-ii/en-US.json
@@ -44,7 +44,9 @@
     "slug": "debounce-ii",
     "subtitle": null,
     "title": "Debounce II",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Function} func\n * @param {number} wait\n * @return {Function}\n */\nexport default function debounce(func, wait) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/debounce/en-US.json b/apps/web/src/__generated__/questions/javascript/debounce/en-US.json
index 904906ff8..664d89cc4 100644
--- a/apps/web/src/__generated__/questions/javascript/debounce/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/debounce/en-US.json
@@ -45,7 +45,9 @@
     "slug": "debounce",
     "subtitle": null,
     "title": "Debounce",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Function} func\n * @param {number} wait\n * @return {Function}\n */\nexport default function debounce(func, wait) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/deep-clone-ii/en-US.json b/apps/web/src/__generated__/questions/javascript/deep-clone-ii/en-US.json
index 227f865b9..41e40a529 100644
--- a/apps/web/src/__generated__/questions/javascript/deep-clone-ii/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/deep-clone-ii/en-US.json
@@ -35,7 +35,9 @@
     "slug": "deep-clone-ii",
     "subtitle": null,
     "title": "Deep Clone II",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @template T\n * @param {T} value\n * @return {T}\n */\nexport default function deepClone(value) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/deep-clone/en-US.json b/apps/web/src/__generated__/questions/javascript/deep-clone/en-US.json
index 5b8318c4f..67d86abf7 100644
--- a/apps/web/src/__generated__/questions/javascript/deep-clone/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/deep-clone/en-US.json
@@ -42,7 +42,9 @@
     "slug": "deep-clone",
     "subtitle": null,
     "title": "Deep Clone",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @template T\n * @param {T} value\n * @return {T}\n */\nexport default function deepClone(value) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/deep-equal/en-US.json b/apps/web/src/__generated__/questions/javascript/deep-equal/en-US.json
index 7bee36782..5d51a27ea 100644
--- a/apps/web/src/__generated__/questions/javascript/deep-equal/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/deep-equal/en-US.json
@@ -38,7 +38,9 @@
     "slug": "deep-equal",
     "subtitle": null,
     "title": "Deep Equal",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {*} valueA\n * @param {*} valueB\n * @return {boolean}\n */\nexport default function deepEqual(valueA, valueB) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/deep-map/en-US.json b/apps/web/src/__generated__/questions/javascript/deep-map/en-US.json
index 038a0efdb..ad9451105 100644
--- a/apps/web/src/__generated__/questions/javascript/deep-map/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/deep-map/en-US.json
@@ -36,7 +36,9 @@
     "slug": "deep-map",
     "subtitle": null,
     "title": "Deep Map",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {any} value\n * @param {Function} fn\n * @returns any\n */\nexport default function deepMap(value, fn) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/deep-merge/en-US.json b/apps/web/src/__generated__/questions/javascript/deep-merge/en-US.json
index f4a28eca3..577a997f6 100644
--- a/apps/web/src/__generated__/questions/javascript/deep-merge/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/deep-merge/en-US.json
@@ -35,7 +35,9 @@
     "slug": "deep-merge",
     "subtitle": null,
     "title": "Deep Merge",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Object|Array} valA\n * @param {Object|Array} valB\n * @returns Object|Array\n */\nexport default function deepMerge(valA, valB) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/deep-omit/en-US.json b/apps/web/src/__generated__/questions/javascript/deep-omit/en-US.json
index 7b54a0fb8..64868bfe2 100644
--- a/apps/web/src/__generated__/questions/javascript/deep-omit/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/deep-omit/en-US.json
@@ -35,7 +35,9 @@
     "slug": "deep-omit",
     "subtitle": null,
     "title": "Deep Omit",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {any} val\n * @param {Array<string>} keys\n * @returns any\n */\nexport default function deepOmit(val, keys) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/event-emitter-ii/en-US.json b/apps/web/src/__generated__/questions/javascript/event-emitter-ii/en-US.json
index 8b3f6c548..c8b576e65 100644
--- a/apps/web/src/__generated__/questions/javascript/event-emitter-ii/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/event-emitter-ii/en-US.json
@@ -42,7 +42,9 @@
     "slug": "event-emitter-ii",
     "subtitle": null,
     "title": "Event Emitter II",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   "skeleton": {
     "js": "// You are free to use alternative approaches of\n// instantiating the EventEmitter as long as the\n// default export is correct.\nexport default class EventEmitter {\n  constructor() {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * @param {string} eventName\n   * @param {Function} listener\n   * @returns {{off: Function}}\n   */\n  on(eventName, listener) {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * @param {string} eventName\n   * @param {...any} args\n   * @returns boolean\n   */\n  emit(eventName, ...args) {\n    throw 'Not implemented!';\n  }\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/event-emitter/en-US.json b/apps/web/src/__generated__/questions/javascript/event-emitter/en-US.json
index b1c31a1ac..b9541704d 100644
--- a/apps/web/src/__generated__/questions/javascript/event-emitter/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/event-emitter/en-US.json
@@ -43,7 +43,9 @@
     "slug": "event-emitter",
     "subtitle": null,
     "title": "Event Emitter",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   "skeleton": {
     "js": "// You are free to use alternative approaches of\n// instantiating the EventEmitter as long as the\n// default export is correct.\n\nexport default class EventEmitter {\n  constructor() {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * @param {string} eventName\n   * @param {Function} listener\n   * @returns {EventEmitter}\n   */\n  on(eventName, listener) {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * @param {string} eventName\n   * @param {Function} listener\n   * @returns {EventEmitter}\n   */\n  off(eventName, listener) {\n    throw 'Not implemented!';\n  }\n\n  /**\n   * @param {string} eventName\n   * @param  {...any} args\n   * @returns {boolean}\n   */\n  emit(eventName, ...args) {\n    throw 'Not implemented!';\n  }\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/flatten/en-US.json b/apps/web/src/__generated__/questions/javascript/flatten/en-US.json
index 84867dcda..95dba9b00 100644
--- a/apps/web/src/__generated__/questions/javascript/flatten/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/flatten/en-US.json
@@ -47,7 +47,9 @@
     "slug": "flatten",
     "subtitle": null,
     "title": "Flatten",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Array<*|Array>} value\n * @return {Array}\n */\nexport default function flatten(value) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/get-elements-by-class-name/en-US.json b/apps/web/src/__generated__/questions/javascript/get-elements-by-class-name/en-US.json
index 2d86c9428..92337c390 100644
--- a/apps/web/src/__generated__/questions/javascript/get-elements-by-class-name/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/get-elements-by-class-name/en-US.json
@@ -42,7 +42,9 @@
     "slug": "get-elements-by-class-name",
     "subtitle": null,
     "title": "getElementsByClassName",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Element} element\n * @param {string} classNames\n * @return {Array<Element>}\n */\nexport default function getElementsByClassName(element, classNames) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/get-elements-by-style/en-US.json b/apps/web/src/__generated__/questions/javascript/get-elements-by-style/en-US.json
index e37740f77..033312264 100644
--- a/apps/web/src/__generated__/questions/javascript/get-elements-by-style/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/get-elements-by-style/en-US.json
@@ -40,7 +40,9 @@
     "slug": "get-elements-by-style",
     "subtitle": null,
     "title": "getElementsByStyle",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Element} element\n * @param {string} property\n * @param {string} value\n * @return {Array<Element>}\n */\nexport default function getElementsByStyle(element, property, value) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/get-elements-by-tag-name-hierarchy/en-US.json b/apps/web/src/__generated__/questions/javascript/get-elements-by-tag-name-hierarchy/en-US.json
index 3170754dd..0f4db2c5d 100644
--- a/apps/web/src/__generated__/questions/javascript/get-elements-by-tag-name-hierarchy/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/get-elements-by-tag-name-hierarchy/en-US.json
@@ -40,7 +40,9 @@
     "slug": "get-elements-by-tag-name-hierarchy",
     "subtitle": null,
     "title": "getElementsByTagNameHierarchy",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Document} document\n * @param {string} tagNames\n * @return {Array<Element>}\n */\nexport default function getElementsByTagNameHierarchy(document, tagNames) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/get-elements-by-tag-name/en-US.json b/apps/web/src/__generated__/questions/javascript/get-elements-by-tag-name/en-US.json
index e63cb1821..93bbac867 100644
--- a/apps/web/src/__generated__/questions/javascript/get-elements-by-tag-name/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/get-elements-by-tag-name/en-US.json
@@ -39,7 +39,9 @@
     "slug": "get-elements-by-tag-name",
     "subtitle": null,
     "title": "getElementsByTagName",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Element} el\n * @param {string} tagName\n * @return {Array<Element>}\n */\nexport default function getElementsByTagName(el, tagName) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/get/en-US.json b/apps/web/src/__generated__/questions/javascript/get/en-US.json
index 8fcd64309..72f4495cd 100644
--- a/apps/web/src/__generated__/questions/javascript/get/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/get/en-US.json
@@ -37,7 +37,9 @@
     "slug": "get",
     "subtitle": null,
     "title": "Get",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Object} objectParam\n * @param {string|Array<string>} pathParam\n * @param {*} [defaultValue]\n * @return {*}\n */\nexport default function get(objectParam, pathParam, defaultValue) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/html-serializer/en-US.json b/apps/web/src/__generated__/questions/javascript/html-serializer/en-US.json
index 3143266af..edbc1b6a2 100644
--- a/apps/web/src/__generated__/questions/javascript/html-serializer/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/html-serializer/en-US.json
@@ -38,7 +38,9 @@
     "slug": "html-serializer",
     "subtitle": null,
     "title": "HTML Serializer",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Object} element\n * @return {string}\n */\nexport default function serializeHTML(element) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/identical-dom-trees/en-US.json b/apps/web/src/__generated__/questions/javascript/identical-dom-trees/en-US.json
index bfa712f81..d74e1bb90 100644
--- a/apps/web/src/__generated__/questions/javascript/identical-dom-trees/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/identical-dom-trees/en-US.json
@@ -36,7 +36,11 @@
     "slug": "identical-dom-trees",
     "subtitle": null,
     "title": "Identical DOM Trees",
-    "topics": []
+    "topics": [
+      "recursion",
+      "tree",
+      "web-api"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Node} nodeA\n * @param {Node} nodeB\n * @return {boolean}\n */\nexport default function identicalDOMTrees(nodeA, nodeB) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/jquery-class-manipulation/en-US.json b/apps/web/src/__generated__/questions/javascript/jquery-class-manipulation/en-US.json
index 24baacf4a..4c9b3f08b 100644
--- a/apps/web/src/__generated__/questions/javascript/jquery-class-manipulation/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/jquery-class-manipulation/en-US.json
@@ -37,7 +37,10 @@
     "slug": "jquery-class-manipulation",
     "subtitle": null,
     "title": "jQuery Class Manipulation",
-    "topics": []
+    "topics": [
+      "oop",
+      "web-api"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {string} selector\n * @return {{toggleClass: Function, addClass: Function, removeClass: Function}}\n */\nexport default function $(selector) {\n  const element = document.querySelector(selector);\n\n  return {\n    /**\n     * @param {string} className\n     * @param {boolean} [state]\n     * @return {Object|void}\n     */\n    toggleClass: function (className, state) {\n      throw 'Not implemented!';\n    },\n    /**\n     * @param {string} className\n     * @return {Object}\n     */\n    addClass: function (className) {\n      throw 'Not implemented!';\n    },\n    /**\n     * @param {string} className\n     * @return {Object}\n     */\n    removeClass: function (className) {\n      throw 'Not implemented!';\n    },\n  };\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/jquery-css/en-US.json b/apps/web/src/__generated__/questions/javascript/jquery-css/en-US.json
index 4341577ab..5a9d8dfd8 100644
--- a/apps/web/src/__generated__/questions/javascript/jquery-css/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/jquery-css/en-US.json
@@ -37,7 +37,10 @@
     "slug": "jquery-css",
     "subtitle": null,
     "title": "jQuery.css",
-    "topics": []
+    "topics": [
+      "oop",
+      "web-api"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {string} selector\n * @return {{css: Function}}\n */\nexport default function $(selector) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/json-stringify-ii/en-US.json b/apps/web/src/__generated__/questions/javascript/json-stringify-ii/en-US.json
index 2fb32a6e9..762eaea38 100644
--- a/apps/web/src/__generated__/questions/javascript/json-stringify-ii/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/json-stringify-ii/en-US.json
@@ -37,7 +37,9 @@
     "slug": "json-stringify-ii",
     "subtitle": null,
     "title": "JSON.stringify II",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {*} value\n * @return {string}\n */\nexport default function jsonStringify(value) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/json-stringify/en-US.json b/apps/web/src/__generated__/questions/javascript/json-stringify/en-US.json
index 502751711..60d0f1b23 100644
--- a/apps/web/src/__generated__/questions/javascript/json-stringify/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/json-stringify/en-US.json
@@ -39,7 +39,9 @@
     "slug": "json-stringify",
     "subtitle": null,
     "title": "JSON.stringify",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {*} value\n * @return {string}\n */\nexport default function jsonStringify(value) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/list.en-US.json b/apps/web/src/__generated__/questions/javascript/list.en-US.json
index d43c6e346..aa51b1e3d 100644
--- a/apps/web/src/__generated__/questions/javascript/list.en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/list.en-US.json
@@ -232,9 +232,7 @@
       "js",
       "ts"
     ],
-    "nextQuestions": [
-      ""
-    ],
+    "nextQuestions": [],
     "published": true,
     "ranking": 100,
     "similarQuestions": [
@@ -244,7 +242,9 @@
     "slug": "backbone-model",
     "subtitle": null,
     "title": "Backbone Model",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   {
     "access": "premium",
@@ -274,7 +274,9 @@
     "slug": "camel-case-keys",
     "subtitle": null,
     "title": "Camel Case Keys",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -303,7 +305,9 @@
     "slug": "cancellable-interval",
     "subtitle": null,
     "title": "Cancellable Interval",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -332,7 +336,9 @@
     "slug": "cancellable-timeout",
     "subtitle": null,
     "title": "Cancellable Timeout",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -718,7 +724,9 @@
     "slug": "cycle",
     "subtitle": null,
     "title": "Cycle",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -820,7 +828,9 @@
     "slug": "debounce",
     "subtitle": null,
     "title": "Debounce",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -858,7 +868,9 @@
     "slug": "debounce-ii",
     "subtitle": null,
     "title": "Debounce II",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "free",
@@ -894,7 +906,9 @@
     "slug": "deep-clone",
     "subtitle": null,
     "title": "Deep Clone",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -923,7 +937,9 @@
     "slug": "deep-clone-ii",
     "subtitle": null,
     "title": "Deep Clone II",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -955,7 +971,9 @@
     "slug": "deep-equal",
     "subtitle": null,
     "title": "Deep Equal",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -985,7 +1003,9 @@
     "slug": "deep-map",
     "subtitle": null,
     "title": "Deep Map",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1014,7 +1034,9 @@
     "slug": "deep-merge",
     "subtitle": null,
     "title": "Deep Merge",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1043,7 +1065,9 @@
     "slug": "deep-omit",
     "subtitle": null,
     "title": "Deep Omit",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1169,7 +1193,9 @@
     "slug": "event-emitter",
     "subtitle": null,
     "title": "Event Emitter",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   {
     "access": "premium",
@@ -1205,7 +1231,9 @@
     "slug": "event-emitter-ii",
     "subtitle": null,
     "title": "Event Emitter II",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   {
     "access": "premium",
@@ -1331,7 +1359,9 @@
     "slug": "flatten",
     "subtitle": null,
     "title": "Flatten",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1515,7 +1545,9 @@
     "slug": "get",
     "subtitle": null,
     "title": "Get",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1551,7 +1583,9 @@
     "slug": "get-elements-by-class-name",
     "subtitle": null,
     "title": "getElementsByClassName",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -1585,7 +1619,9 @@
     "slug": "get-elements-by-style",
     "subtitle": null,
     "title": "getElementsByStyle",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -1618,7 +1654,9 @@
     "slug": "get-elements-by-tag-name",
     "subtitle": null,
     "title": "getElementsByTagName",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -1652,7 +1690,9 @@
     "slug": "get-elements-by-tag-name-hierarchy",
     "subtitle": null,
     "title": "getElementsByTagNameHierarchy",
-    "topics": []
+    "topics": [
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -1713,7 +1753,9 @@
     "slug": "html-serializer",
     "subtitle": null,
     "title": "HTML Serializer",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -1743,7 +1785,11 @@
     "slug": "identical-dom-trees",
     "subtitle": null,
     "title": "Identical DOM Trees",
-    "topics": []
+    "topics": [
+      "recursion",
+      "tree",
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -1920,7 +1966,10 @@
     "slug": "jquery-class-manipulation",
     "subtitle": null,
     "title": "jQuery Class Manipulation",
-    "topics": []
+    "topics": [
+      "oop",
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -1951,7 +2000,10 @@
     "slug": "jquery-css",
     "subtitle": null,
     "title": "jQuery.css",
-    "topics": []
+    "topics": [
+      "oop",
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -1984,7 +2036,9 @@
     "slug": "json-stringify",
     "subtitle": null,
     "title": "JSON.stringify",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -2015,7 +2069,9 @@
     "slug": "json-stringify-ii",
     "subtitle": null,
     "title": "JSON.stringify II",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -2106,7 +2162,9 @@
     "slug": "make-counter",
     "subtitle": null,
     "title": "Make Counter",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -2138,7 +2196,9 @@
     "slug": "make-counter-ii",
     "subtitle": null,
     "title": "Make Counter II",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -2173,7 +2233,9 @@
     "slug": "map-async",
     "subtitle": null,
     "title": "Map Async",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2206,7 +2268,9 @@
     "slug": "map-async-limit",
     "subtitle": null,
     "title": "Map Async Limit",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2448,7 +2512,9 @@
     "slug": "once",
     "subtitle": null,
     "title": "Once",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   {
     "access": "free",
@@ -2489,7 +2555,9 @@
     "slug": "promise-all",
     "subtitle": null,
     "title": "Promise.all",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2520,7 +2588,9 @@
     "slug": "promise-all-settled",
     "subtitle": null,
     "title": "Promise.allSettled",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2551,7 +2621,9 @@
     "slug": "promise-any",
     "subtitle": null,
     "title": "Promise.any",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2583,7 +2655,9 @@
     "slug": "promise-merge",
     "subtitle": null,
     "title": "Promise Merge",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2616,7 +2690,9 @@
     "slug": "promise-race",
     "subtitle": null,
     "title": "Promise.race",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2649,7 +2725,9 @@
     "slug": "promise-reject",
     "subtitle": null,
     "title": "Promise.reject",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2682,7 +2760,9 @@
     "slug": "promise-resolve",
     "subtitle": null,
     "title": "Promise.resolve",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2709,7 +2789,9 @@
     "slug": "promise-timeout",
     "subtitle": null,
     "title": "Promise Timeout",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2739,7 +2821,9 @@
     "slug": "promise-with-resolvers",
     "subtitle": null,
     "title": "Promise.withResolvers",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2770,7 +2854,9 @@
     "slug": "promisify",
     "subtitle": null,
     "title": "Promisify",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2797,7 +2883,9 @@
     "slug": "promisify-ii",
     "subtitle": null,
     "title": "Promisify II",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -2890,7 +2978,10 @@
     "slug": "resumable-interval",
     "subtitle": null,
     "title": "Resumable Interval",
-    "topics": []
+    "topics": [
+      "async",
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -2971,7 +3062,9 @@
     "slug": "sleep",
     "subtitle": null,
     "title": "Sleep",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -3001,7 +3094,9 @@
     "slug": "squash-object",
     "subtitle": null,
     "title": "Squash Object",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   {
     "access": "premium",
@@ -3033,7 +3128,9 @@
     "slug": "sum",
     "subtitle": null,
     "title": "Sum",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   {
     "access": "premium",
@@ -3063,7 +3160,11 @@
     "slug": "table-of-contents",
     "subtitle": null,
     "title": "Table of Contents",
-    "topics": []
+    "topics": [
+      "recursion",
+      "tree",
+      "web-api"
+    ]
   },
   {
     "access": "premium",
@@ -3161,7 +3262,9 @@
     "slug": "throttle",
     "subtitle": null,
     "title": "Throttle",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -3188,7 +3291,9 @@
     "slug": "turtle",
     "subtitle": null,
     "title": "Turtle",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   {
     "access": "free",
diff --git a/apps/web/src/__generated__/questions/javascript/make-counter-ii/en-US.json b/apps/web/src/__generated__/questions/javascript/make-counter-ii/en-US.json
index e3962d78a..9bbce7a4f 100644
--- a/apps/web/src/__generated__/questions/javascript/make-counter-ii/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/make-counter-ii/en-US.json
@@ -38,7 +38,9 @@
     "slug": "make-counter-ii",
     "subtitle": null,
     "title": "Make Counter II",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {number} initialValue\n * @return {{get: Function, increment: Function, decrement: Function, reset: Function }}\n */\nexport default function makeCounter(initialValue = 0) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/make-counter/en-US.json b/apps/web/src/__generated__/questions/javascript/make-counter/en-US.json
index 298e8d07c..929330c3a 100644
--- a/apps/web/src/__generated__/questions/javascript/make-counter/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/make-counter/en-US.json
@@ -39,7 +39,9 @@
     "slug": "make-counter",
     "subtitle": null,
     "title": "Make Counter",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {number} initialValue\n * @return {Function}\n */\nexport default function makeCounter(initialValue = 0) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/map-async-limit/en-US.json b/apps/web/src/__generated__/questions/javascript/map-async-limit/en-US.json
index e2a94e62f..9244bbc60 100644
--- a/apps/web/src/__generated__/questions/javascript/map-async-limit/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/map-async-limit/en-US.json
@@ -39,7 +39,9 @@
     "slug": "map-async-limit",
     "subtitle": null,
     "title": "Map Async Limit",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Array<any>} iterable\n * @param {Function} callbackFn\n * @param {number} size\n *\n * @return {Promise}\n */\nexport default function mapAsyncLimit(iterable, callbackFn, size) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/map-async/en-US.json b/apps/web/src/__generated__/questions/javascript/map-async/en-US.json
index b2ec02e4f..93ea105d3 100644
--- a/apps/web/src/__generated__/questions/javascript/map-async/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/map-async/en-US.json
@@ -41,7 +41,9 @@
     "slug": "map-async",
     "subtitle": null,
     "title": "Map Async",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Array<any>} iterable\n * @param {Function} callbackFn\n *\n * @return {Promise}\n */\nexport default function mapAsync(iterable, callbackFn) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/once/en-US.json b/apps/web/src/__generated__/questions/javascript/once/en-US.json
index 4b2ee9dc6..ec4f76373 100644
--- a/apps/web/src/__generated__/questions/javascript/once/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/once/en-US.json
@@ -37,7 +37,9 @@
     "slug": "once",
     "subtitle": null,
     "title": "Once",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @template {Function} T\n * @param {T} func\n * @return {T}\n */\nexport default function once(func) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promise-all-settled/en-US.json b/apps/web/src/__generated__/questions/javascript/promise-all-settled/en-US.json
index 0688f60ba..6f6209303 100644
--- a/apps/web/src/__generated__/questions/javascript/promise-all-settled/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promise-all-settled/en-US.json
@@ -37,7 +37,9 @@
     "slug": "promise-all-settled",
     "subtitle": null,
     "title": "Promise.allSettled",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Array} iterable\n * @return {Promise<Array<{status: 'fulfilled', value: *}|{status: 'rejected', reason: *}>>}\n */\nexport default function promiseAllSettled(iterable) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promise-all/en-US.json b/apps/web/src/__generated__/questions/javascript/promise-all/en-US.json
index 51c30cd90..58b329401 100644
--- a/apps/web/src/__generated__/questions/javascript/promise-all/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promise-all/en-US.json
@@ -47,7 +47,9 @@
     "slug": "promise-all",
     "subtitle": null,
     "title": "Promise.all",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Array} iterable\n * @return {Promise<Array>}\n */\nexport default function promiseAll(iterable) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promise-any/en-US.json b/apps/web/src/__generated__/questions/javascript/promise-any/en-US.json
index 67ebc3cbd..fbff4e6c1 100644
--- a/apps/web/src/__generated__/questions/javascript/promise-any/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promise-any/en-US.json
@@ -37,7 +37,9 @@
     "slug": "promise-any",
     "subtitle": null,
     "title": "Promise.any",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Array} iterable\n * @return {Promise}\n */\nexport default function promiseAny(iterable) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promise-merge/en-US.json b/apps/web/src/__generated__/questions/javascript/promise-merge/en-US.json
index 99f14efea..b6bb6a2ee 100644
--- a/apps/web/src/__generated__/questions/javascript/promise-merge/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promise-merge/en-US.json
@@ -38,7 +38,9 @@
     "slug": "promise-merge",
     "subtitle": null,
     "title": "Promise Merge",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Promise} p1\n * @param {Promise} p2\n * @return {Promise<any>}\n */\nexport default function promiseMerge(p1, p2) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promise-race/en-US.json b/apps/web/src/__generated__/questions/javascript/promise-race/en-US.json
index 0a6ca232a..b8a3bc82a 100644
--- a/apps/web/src/__generated__/questions/javascript/promise-race/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promise-race/en-US.json
@@ -39,7 +39,9 @@
     "slug": "promise-race",
     "subtitle": null,
     "title": "Promise.race",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Array} iterable\n * @return {Promise}\n */\nexport default function promiseRace(iterable) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promise-reject/en-US.json b/apps/web/src/__generated__/questions/javascript/promise-reject/en-US.json
index 5136b2b41..456067ad8 100644
--- a/apps/web/src/__generated__/questions/javascript/promise-reject/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promise-reject/en-US.json
@@ -39,7 +39,9 @@
     "slug": "promise-reject",
     "subtitle": null,
     "title": "Promise.reject",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {*} reason\n * @returns Promise\n */\nexport default function promiseReject(reason) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promise-resolve/en-US.json b/apps/web/src/__generated__/questions/javascript/promise-resolve/en-US.json
index ddf0f05f4..37b62a115 100644
--- a/apps/web/src/__generated__/questions/javascript/promise-resolve/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promise-resolve/en-US.json
@@ -39,7 +39,9 @@
     "slug": "promise-resolve",
     "subtitle": null,
     "title": "Promise.resolve",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {*} value\n * @returns Promise\n */\nexport default function promiseResolve(value) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promise-timeout/en-US.json b/apps/web/src/__generated__/questions/javascript/promise-timeout/en-US.json
index 3f8cd6a34..5281096f3 100644
--- a/apps/web/src/__generated__/questions/javascript/promise-timeout/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promise-timeout/en-US.json
@@ -33,7 +33,9 @@
     "slug": "promise-timeout",
     "subtitle": null,
     "title": "Promise Timeout",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @template T\n * @param {Promise<T>} promise\n * @param {number} duration\n * @return {Promise<T>}\n */\nexport default function promiseTimeout(promise, duration) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promise-with-resolvers/en-US.json b/apps/web/src/__generated__/questions/javascript/promise-with-resolvers/en-US.json
index 515609322..91a3310d5 100644
--- a/apps/web/src/__generated__/questions/javascript/promise-with-resolvers/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promise-with-resolvers/en-US.json
@@ -36,7 +36,9 @@
     "slug": "promise-with-resolvers",
     "subtitle": null,
     "title": "Promise.withResolvers",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @returns { promise: Promise, resolve: Function, reject: Function }\n */\nexport default function promiseWithResolvers() {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promisify-ii/en-US.json b/apps/web/src/__generated__/questions/javascript/promisify-ii/en-US.json
index ae6fbebc5..2ec586bde 100644
--- a/apps/web/src/__generated__/questions/javascript/promisify-ii/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promisify-ii/en-US.json
@@ -33,7 +33,9 @@
     "slug": "promisify-ii",
     "subtitle": null,
     "title": "Promisify II",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @callback func\n * @returns Function\n */\nexport default function promisify(func) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/promisify/en-US.json b/apps/web/src/__generated__/questions/javascript/promisify/en-US.json
index 96d42bc2f..4415f8751 100644
--- a/apps/web/src/__generated__/questions/javascript/promisify/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/promisify/en-US.json
@@ -37,7 +37,9 @@
     "slug": "promisify",
     "subtitle": null,
     "title": "Promisify",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @callback func\n * @returns Function\n */\nexport default function promisify(func) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/resumable-interval/en-US.json b/apps/web/src/__generated__/questions/javascript/resumable-interval/en-US.json
index 77bccaf5b..f772469d3 100644
--- a/apps/web/src/__generated__/questions/javascript/resumable-interval/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/resumable-interval/en-US.json
@@ -35,7 +35,10 @@
     "slug": "resumable-interval",
     "subtitle": null,
     "title": "Resumable Interval",
-    "topics": []
+    "topics": [
+      "async",
+      "closure"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Function} callback\n * @param {number} delay\n * @param {...any} args\n * @returns {{start: Function, pause: Function, stop: Function}}\n */\nexport default function createResumableInterval(callback, delay, ...args) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/sleep/en-US.json b/apps/web/src/__generated__/questions/javascript/sleep/en-US.json
index aa28837c6..ad4ccb7ef 100644
--- a/apps/web/src/__generated__/questions/javascript/sleep/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/sleep/en-US.json
@@ -33,7 +33,9 @@
     "slug": "sleep",
     "subtitle": null,
     "title": "Sleep",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {number} duration\n * @return {Promise<void>}\n */\nexport default async function sleep(duration) {\n  throw 'Not implemented';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/squash-object/en-US.json b/apps/web/src/__generated__/questions/javascript/squash-object/en-US.json
index 9c0255d05..160fa11ca 100644
--- a/apps/web/src/__generated__/questions/javascript/squash-object/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/squash-object/en-US.json
@@ -36,7 +36,9 @@
     "slug": "squash-object",
     "subtitle": null,
     "title": "Squash Object",
-    "topics": []
+    "topics": [
+      "recursion"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Object} obj\n * @return {Object}\n */\nexport default function squashObject(obj) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/sum/en-US.json b/apps/web/src/__generated__/questions/javascript/sum/en-US.json
index e8c9381e2..7a2f51dd8 100644
--- a/apps/web/src/__generated__/questions/javascript/sum/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/sum/en-US.json
@@ -38,7 +38,9 @@
     "slug": "sum",
     "subtitle": null,
     "title": "Sum",
-    "topics": []
+    "topics": [
+      "closure"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {number} value\n * @return {Function}\n */\nexport default function sum(value) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/table-of-contents/en-US.json b/apps/web/src/__generated__/questions/javascript/table-of-contents/en-US.json
index 41f15fc58..c91214f36 100644
--- a/apps/web/src/__generated__/questions/javascript/table-of-contents/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/table-of-contents/en-US.json
@@ -36,7 +36,11 @@
     "slug": "table-of-contents",
     "subtitle": null,
     "title": "Table of Contents",
-    "topics": []
+    "topics": [
+      "recursion",
+      "tree",
+      "web-api"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @param {Document} doc\n * @return {string}\n */\nexport default function tableOfContents(doc) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/throttle/en-US.json b/apps/web/src/__generated__/questions/javascript/throttle/en-US.json
index bb34e76e8..67562b903 100644
--- a/apps/web/src/__generated__/questions/javascript/throttle/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/throttle/en-US.json
@@ -40,7 +40,9 @@
     "slug": "throttle",
     "subtitle": null,
     "title": "Throttle",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   "skeleton": {
     "js": "/**\n * @callback func\n * @param {number} wait\n * @return {Function}\n */\nexport default function throttle(func, wait) {\n  throw 'Not implemented!';\n}",
diff --git a/apps/web/src/__generated__/questions/javascript/turtle/en-US.json b/apps/web/src/__generated__/questions/javascript/turtle/en-US.json
index 666b766dc..560ccf0a5 100644
--- a/apps/web/src/__generated__/questions/javascript/turtle/en-US.json
+++ b/apps/web/src/__generated__/questions/javascript/turtle/en-US.json
@@ -33,7 +33,9 @@
     "slug": "turtle",
     "subtitle": null,
     "title": "Turtle",
-    "topics": []
+    "topics": [
+      "oop"
+    ]
   },
   "skeleton": {
     "js": "export default class Turtle {\n  constructor() {\n    throw 'Not implemented';\n  }\n\n  /**\n   * @param {number} distance Distance to move forward while facing the current direction.\n   * @return {Turtle}\n   */\n  forward(distance) {\n    throw 'Not implemented';\n  }\n\n  /**\n   * @param {number} distance Distance to move backward while facing the current direction.\n   * @return {Turtle}\n   */\n  backward(distance) {\n    throw 'Not implemented';\n  }\n\n  /**\n   * Turns the turtle left.\n   * @return {Turtle}\n   */\n  left() {\n    throw 'Not implemented';\n  }\n\n  /**\n   * Turns the turtle right.\n   * @return {Turtle}\n   */\n  right() {\n    throw 'Not implemented';\n  }\n\n  /**\n   * @return {[number, number]} Coordinates [x, y]\n   */\n  position() {\n    throw 'Not implemented';\n  }\n}",
diff --git a/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/en-US.json b/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/en-US.json
index e7706ea14..3dfc73de2 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/en-US.json
@@ -24,8 +24,8 @@
     "subtitle": null,
     "title": "Describe event bubbling in JavaScript and browsers",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-bubbling/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/pt-BR.json b/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/pt-BR.json
index 0bb3e20f4..fdb4a2d35 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/pt-BR.json
@@ -24,8 +24,8 @@
     "subtitle": null,
     "title": "Descreva a propagação de eventos",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-bubbling/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/zh-CN.json b/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/zh-CN.json
index 5130e3ce9..a0a5cba4c 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-event-bubbling/zh-CN.json
@@ -24,8 +24,8 @@
     "subtitle": null,
     "title": "描述事件冒泡过程",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-bubbling/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/describe-event-capturing/en-US.json b/apps/web/src/__generated__/questions/quiz/describe-event-capturing/en-US.json
index aac115a9d..32393c06a 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-event-capturing/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-event-capturing/en-US.json
@@ -24,8 +24,8 @@
     "subtitle": null,
     "title": "Describe event capturing in JavaScript and browsers",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-capturing/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.json b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.json
index 06e9bdff0..7962825ad 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.json
@@ -27,6 +27,7 @@
     "subtitle": null,
     "title": "Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.json b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.json
index 08b42e887..168c3c25a 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.json
@@ -27,6 +27,7 @@
     "subtitle": null,
     "title": "Descreva a diferença entre cookie, `sessionStorage` e `localStorage`.",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.json b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.json
index 2a1338b98..5581c4331 100644
--- a/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.json
@@ -27,6 +27,7 @@
     "subtitle": null,
     "title": "描述cookie、 `sessionStorage` 和 `localStorage` 之间的差异。",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.json b/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.json
index 8346b1448..7881df847 100644
--- a/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.json
@@ -24,8 +24,8 @@
     "subtitle": null,
     "title": "Difference between document `load` event and document `DOMContentLoaded` event?",
     "topics": [
-      "javascript",
-      "html"
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/pt-BR.json b/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/pt-BR.json
index e45d2db19..a7f4c06bb 100644
--- a/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/pt-BR.json
@@ -24,8 +24,8 @@
     "subtitle": null,
     "title": "Qual a diferença entre o evento `load` do documento e o evento `DOMContentLoaded` do documento?",
     "topics": [
-      "javascript",
-      "html"
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-document-load-event-and-document-domcontentloaded-event/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.json b/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.json
index 3a028320b..f3af0866b 100644
--- a/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.json
@@ -24,8 +24,8 @@
     "subtitle": null,
     "title": "Document `load` 事件和 `DOMContentLoaded` 事件之间的区别？",
     "topics": [
-      "javascript",
-      "html"
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.json b/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.json
index 5ee6f9fd9..80202136c 100644
--- a/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.json b/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.json
index e0fce5a4f..9576ab878 100644
--- a/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Diferença entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.json b/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.json
index 57c3c89fa..b43324411 100644
--- a/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "比较差异: `function Person(){}`, `var person = Person()`, 和 `var person = new Person()`?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/en-US.json
index 9599433bd..0c6c7a398 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/en-US.json
@@ -25,7 +25,7 @@
     "title": "Explain AJAX in as much detail as possible",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/pt-BR.json
index bf16c33ce..19445675e 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/pt-BR.json
@@ -25,7 +25,7 @@
     "title": "Explique o Ajax com o máximo de detalhes possível.",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-ajax-in-as-much-detail-as-possible/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/zh-CN.json
index 9dcdd2c16..e606f40cf 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-ajax-in-as-much-detail-as-possible/zh-CN.json
@@ -25,7 +25,7 @@
     "title": "尽可能详细地解释Ajax",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-event-delegation/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-event-delegation/en-US.json
index 335042ec6..eaf75e91e 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-event-delegation/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-event-delegation/en-US.json
@@ -26,8 +26,8 @@
     "subtitle": null,
     "title": "Explain event delegation in JavaScript",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-event-delegation/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-event-delegation/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-event-delegation/pt-BR.json
index 94aa917f4..5fb74302d 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-event-delegation/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-event-delegation/pt-BR.json
@@ -26,8 +26,8 @@
     "subtitle": null,
     "title": "Explique delegação do evento",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-event-delegation/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-event-delegation/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-event-delegation/zh-CN.json
index 344ca50d1..ef53ea010 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-event-delegation/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-event-delegation/zh-CN.json
@@ -26,8 +26,8 @@
     "subtitle": null,
     "title": "解释事件委托",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-event-delegation/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/en-US.json
index 77f8aeba7..a11bffcaa 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Explain `Function.prototype.bind` in JavaScript",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-function-prototype-bind/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/pt-BR.json
index fbc1d1909..dd5f2c9a0 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/pt-BR.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Explique `Function.prototype.bind`",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-function-prototype-bind/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/zh-CN.json
index 51f58a132..27d0d6f1b 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-function-prototype-bind/zh-CN.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "解释 `Function.prototype.bind`",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-function-prototype-bind/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.json
index 3fdcedf78..bbedda582 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explain how a browser determines what elements match a CSS selector.",
     "topics": [
+      "browser",
       "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/pt-BR.json
index 88b6800d9..59726f993 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/pt-BR.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explique como um navegador determina quais elementos correspondem a um seletor CSS.",
     "topics": [
+      "browser",
       "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.json
index 471452305..4dde2a99c 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "解释浏览器如何决定什么元素与 CSS 选择器匹配。",
     "topics": [
+      "browser",
       "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.json
index d3848e655..08010678c 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.json
@@ -25,7 +25,7 @@
     "title": "Explain how JSONP works (and how it's not really Ajax)",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.json
index 713f94f25..0d7202208 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.json
@@ -25,7 +25,7 @@
     "title": "Explique como o JSONP funciona (e como ele não é Ajax)",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.json
index b5e6f52ad..5dab635c3 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.json
@@ -25,7 +25,7 @@
     "title": "解释JSONP 如何工作(以及它为什么不是真正的 Ajax)",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/en-US.json
index 1a962405d..1dba51fc9 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Explain how prototypal inheritance works in JavaScript",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-prototypal-inheritance-works/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/pt-BR.json
index 0805152ba..2274e187c 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/pt-BR.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Explique como funciona a herança de protótipos",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-prototypal-inheritance-works/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/zh-CN.json
index 40604a646..4c7cee713 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-prototypal-inheritance-works/zh-CN.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "解释原型继承如何工作",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/en-US.json
index 5221c3dbc..48a47eee6 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Explain how `this` works in JavaScript",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-this-works-in-javascript/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/pt-BR.json
index de63d5d45..4845221ac 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/pt-BR.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Explique como `this` funciona em JavaScript",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-this-works-in-javascript/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/zh-CN.json
index 0604815c6..a486a484a 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-how-this-works-in-javascript/zh-CN.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "解释 JavaScript `this` 如何工作",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-this-works-in-javascript/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.json
index e69058a7b..edf5e79a8 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explain the concept of a callback function in asynchronous operations",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-microtask-queue/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-microtask-queue/en-US.json
index aea183408..349ea207c 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-microtask-queue/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-a-microtask-queue/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explain the concept of a microtask queue",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-microtask-queue/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.json
index 68cf20e18..a4a777ee1 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.json
@@ -25,7 +25,7 @@
     "title": "Explain the concept of Cross-Site Request Forgery (CSRF) and its mitigation techniques",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-debouncing-and-throttling/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-debouncing-and-throttling/en-US.json
index f63092ae3..30ff277f0 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-debouncing-and-throttling/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-debouncing-and-throttling/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explain the concept of debouncing and throttling",
     "topics": [
+      "async",
       "javascript",
       "performance"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-inheritance-in-es2015-classes/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-inheritance-in-es2015-classes/en-US.json
index de6521da8..f09bd3ff8 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-inheritance-in-es2015-classes/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-inheritance-in-es2015-classes/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Explain the concept of inheritance in ES2015 classes",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-partial-application/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-partial-application/en-US.json
index 0034d1533..d4d68c988 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-partial-application/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-partial-application/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explain the concept of partial application",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-partial-application/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-prototype-pattern/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-prototype-pattern/en-US.json
index a17e83832..e15566883 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-prototype-pattern/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-prototype-pattern/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Explain the concept of the Prototype pattern",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-prototype-pattern/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-web-socket-api/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-web-socket-api/en-US.json
index e69e31c29..7171981f9 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-web-socket-api/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-the-web-socket-api/en-US.json
@@ -25,7 +25,7 @@
     "title": "Explain the concept of the Web Socket API",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-web-socket-api/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-this-binding-in-event-handlers/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-this-binding-in-event-handlers/en-US.json
index b058ca4c8..3686d8c8e 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-this-binding-in-event-handlers/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-concept-of-this-binding-in-event-handlers/en-US.json
@@ -24,6 +24,8 @@
     "subtitle": null,
     "title": "Explain the concept of `this` binding in event handlers",
     "topics": [
+      "closure",
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.json
index 710a352ce..ee72329e8 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Explain the difference between classical inheritance and prototypal inheritance",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.json
index d89360301..6b48bcd4a 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explain the difference between `document.querySelector()` and `document.getElementById()`",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.json
index 08fc715d7..6480c8753 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explain the difference between synchronous and asynchronous functions in JavaScript",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/pt-BR.json
index 960ad17ca..b09261a61 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/pt-BR.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explique a diferença entre funções síncronas e assíncronas",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.json
index 1a6c8f660..75b6ea521 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "解释同步函数和异步函数之间的差异",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-different-states-of-a-promise/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-different-states-of-a-promise/en-US.json
index 1ab32f5e7..87b87ef66 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-different-states-of-a-promise/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-different-states-of-a-promise/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explain the different states of a Promise",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-states-of-a-promise/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.json
index c89f6b39d..a95392c97 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explain the different ways the `this` keyword can be bound",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-event-phases-in-a-browser/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-event-phases-in-a-browser/en-US.json
index 4eb46b28f..62a284893 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-event-phases-in-a-browser/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-event-phases-in-a-browser/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Explain the event phases in a browser",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-event-phases-in-a-browser/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/en-US.json
index 9c268988f..36e137a76 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/en-US.json
@@ -25,7 +25,7 @@
     "title": "Explain the same-origin policy with regards to JavaScript",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-same-origin-policy-with-regards-to-javascript/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/pt-BR.json b/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/pt-BR.json
index 14252749d..1facb7e8a 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/pt-BR.json
@@ -25,7 +25,7 @@
     "title": "Explique a política de mesma origem em relação ao JavaScript",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-same-origin-policy-with-regards-to-javascript/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.json b/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.json
index bf5660f2f..cfd6f0447 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.json
@@ -25,7 +25,7 @@
     "title": "解释与JavaScript有关的同源策略。",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.json b/apps/web/src/__generated__/questions/quiz/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.json
index c1d43808e..755ae955b 100644
--- a/apps/web/src/__generated__/questions/quiz/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.json
@@ -22,11 +22,11 @@
     "similarQuestions": [],
     "slug": "explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife",
     "subtitle": null,
-    "title": "Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?",
+    "title": "Explain why the following doesn't work as an IIFE: `function foo(){}();`. What needs to be changed to properly make it an IIFE?",
     "topics": [
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.mdx"
   },
-  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!m.call(t,r)&&r!==o&&a(t,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return t};var v=(t,e,o)=>(o=t!=null?h(f(t)):{},c(e||!t||!t.__esModule?a(o,\"default\",{value:t,enumerable:!0}):o,t)),I=t=>c(a({},\"__esModule\",{value:!0}),t);var d=x((k,s)=>{s.exports=_jsx_runtime});var E={};y(E,{default:()=>b,frontmatter:()=>g});var n=v(d()),g={title:\"Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The code \",(0,n.jsx)(e.code,{children:\"function foo(){ }();\"}),\" doesn't work as an Immediately Invoked Function Expression (IIFE) because the JavaScript parser treats \",(0,n.jsx)(e.code,{children:\"function foo(){ }\"}),\" as a function declaration, not an expression. To make it an IIFE, you need to wrap the function in parentheses to turn it into a function expression: \",(0,n.jsx)(e.code,{children:\"(function foo(){ })();\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Why the code doesn't work as an IIFE\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Function declaration vs. function expression\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, a function declaration and a function expression are treated differently by the parser. The code \",(0,n.jsx)(e.code,{children:\"function foo(){ }\"}),\" is interpreted as a function declaration. Function declarations are not immediately invoked; they are hoisted to the top of their scope and can be called later in the code.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax error\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When you try to immediately invoke a function declaration by adding \",(0,n.jsx)(e.code,{children:\"();\"}),\" at the end, it results in a syntax error because the parser expects a function expression to be invoked immediately, not a declaration.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"How to properly make it an IIFE\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Wrapping in parentheses\"}),`\n`,(0,n.jsx)(e.p,{children:\"To convert the function declaration into a function expression, you need to wrap the entire function in parentheses. This tells the JavaScript parser to treat it as an expression. Here is the corrected code:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`(function foo() {})();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Alternative syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also use an alternative syntax by placing the parentheses after the function expression:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`(function foo() {})();\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Both of these syntaxes are valid and will correctly create an IIFE.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/IIFE\",children:\"MDN Web Docs: IIFE\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"JavaScript Function Expressions\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"JavaScript Function Declarations\"})}),`\n`]})]})}function F(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var b=F;return I(E);})();\n;return Component;"
+  "solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!m.call(t,r)&&r!==o&&a(t,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return t};var v=(t,e,o)=>(o=t!=null?h(f(t)):{},c(e||!t||!t.__esModule?a(o,\"default\",{value:t,enumerable:!0}):o,t)),I=t=>c(a({},\"__esModule\",{value:!0}),t);var d=x((k,s)=>{s.exports=_jsx_runtime});var E={};y(E,{default:()=>b,frontmatter:()=>g});var n=v(d()),g={title:\"Explain why the following doesn't work as an IIFE: `function foo(){}();`. What needs to be changed to properly make it an IIFE?\"};function l(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",hr:\"hr\",h3:\"h3\",pre:\"pre\",ul:\"ul\",li:\"li\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"TL;DR\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The code \",(0,n.jsx)(e.code,{children:\"function foo(){}();\"}),\" doesn't work as an Immediately Invoked Function Expression (IIFE) because the JavaScript parser treats \",(0,n.jsx)(e.code,{children:\"function foo(){}\"}),\" as a function declaration, not an expression. To make it an IIFE, you need to wrap the function in parentheses to turn it into a function expression: \",(0,n.jsx)(e.code,{children:\"(function foo(){})();\"}),\".\"]}),`\n`,(0,n.jsx)(e.hr,{}),`\n`,(0,n.jsx)(e.h2,{children:\"Why the code doesn't work as an IIFE\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Function declaration vs. function expression\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"In JavaScript, a function declaration and a function expression are treated differently by the parser. The code \",(0,n.jsx)(e.code,{children:\"function foo(){}\"}),\" is interpreted as a function declaration. Function declarations are not immediately invoked; they are hoisted to the top of their scope and can be called later in the code.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Syntax error\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"When you try to immediately invoke a function declaration by adding \",(0,n.jsx)(e.code,{children:\"();\"}),\" at the end, it results in a syntax error because the parser expects a function expression to be invoked immediately, not a declaration.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"How to properly make it an IIFE\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Wrapping in parentheses\"}),`\n`,(0,n.jsx)(e.p,{children:\"To convert the function declaration into a function expression, you need to wrap the function declaration in parentheses. This tells the JavaScript parser to treat it as an expression. Here is the corrected code:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`(function foo(){})();\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Alternative syntax\"}),`\n`,(0,n.jsx)(e.p,{children:\"You can also use an alternative syntax by placing the parentheses around the original line:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-javascript\",children:`(function foo(){}());\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Both of these syntaxes are valid and will correctly create an IIFE.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Further reading\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Glossary/IIFE\",children:\"MDN Web Docs: IIFE\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function\",children:\"JavaScript Function Expressions\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\",children:\"JavaScript Function Declarations\"})}),`\n`]})]})}function F(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var b=F;return I(E);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-closures-be-used-to-create-private-variables/en-US.json b/apps/web/src/__generated__/questions/quiz/how-can-closures-be-used-to-create-private-variables/en-US.json
index e911f3f01..f7b07d52f 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-closures-be-used-to-create-private-variables/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-closures-be-used-to-create-private-variables/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How can closures be used to create private variables?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-closures-be-used-to-create-private-variables/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.json b/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.json
index 0557140b5..a1bb2ddff 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How can you optimize DOM manipulation for better performance?",
     "topics": [
+      "web-api",
       "javascript",
       "performance"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-network-requests-for-better-performance/en-US.json b/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-network-requests-for-better-performance/en-US.json
index abf41f83f..7976941b8 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-network-requests-for-better-performance/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-optimize-network-requests-for-better-performance/en-US.json
@@ -25,6 +25,7 @@
     "title": "How can you optimize network requests for better performance?",
     "topics": [
       "javascript",
+      "networking",
       "performance"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-optimize-network-requests-for-better-performance/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/how-can-you-test-asynchronous-code-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/how-can-you-test-asynchronous-code-in-javascript/en-US.json
index 94c8dc652..018b01909 100644
--- a/apps/web/src/__generated__/questions/quiz/how-can-you-test-asynchronous-code-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-can-you-test-asynchronous-code-in-javascript/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How can you test asynchronous code in JavaScript?",
     "topics": [
+      "async",
       "javascript",
       "testing"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-currying-and-partial-application-differ-from-each-other/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-currying-and-partial-application-differ-from-each-other/en-US.json
index 6dc64c591..e922194f5 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-currying-and-partial-application-differ-from-each-other/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-currying-and-partial-application-differ-from-each-other/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How do currying and partial application differ from each other?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-iframe-on-a-page-communicate/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-iframe-on-a-page-communicate/en-US.json
index 7ec619181..f3a8115a7 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-iframe-on-a-page-communicate/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-iframe-on-a-page-communicate/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How do `<iframe>` on a page communicate?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.json
index 8f00cfe93..29e720af9 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.json
@@ -25,7 +25,7 @@
     "title": "How do you abort a web request using `AbortController` in JavaScript?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.json
index 1f4b44847..ad1f93aa1 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How do you add, remove, and modify HTML elements using JavaScript?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-create-a-constructor-function/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-create-a-constructor-function/en-US.json
index 54bc0d6ca..5d43de3f6 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-create-a-constructor-function/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-create-a-constructor-function/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "How do you create a constructor function?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-create-a-constructor-function/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.json
index fb1ce33b9..5167ab6fb 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How do you detect if JavaScript is disabled on a page?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.json
index 9600c9746..2f4a6eb37 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How do you get the query string values of the current page in JavaScript?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-in-asynchronous-operations/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-in-asynchronous-operations/en-US.json
index 5b17f10ca..81d098441 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-in-asynchronous-operations/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-handle-errors-in-asynchronous-operations/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How do you handle errors in asynchronous operations?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-make-an-http-request-using-the-fetch-api/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-make-an-http-request-using-the-fetch-api/en-US.json
index 959d7d156..2e6cd6714 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-make-an-http-request-using-the-fetch-api/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-make-an-http-request-using-the-fetch-api/en-US.json
@@ -25,7 +25,7 @@
     "title": "How do you make an HTTP request using the Fetch API?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-manipulate-css-styles-using-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-manipulate-css-styles-using-javascript/en-US.json
index 9e1cc8136..8f8fd763f 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-manipulate-css-styles-using-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-manipulate-css-styles-using-javascript/en-US.json
@@ -24,8 +24,9 @@
     "subtitle": null,
     "title": "How do you manipulate CSS styles using JavaScript?",
     "topics": [
-      "javascript",
-      "css"
+      "css",
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-manipulate-css-styles-using-javascript/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-prevent-the-default-behavior-of-an-event/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-prevent-the-default-behavior-of-an-event/en-US.json
index 599093950..955cae85a 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-prevent-the-default-behavior-of-an-event/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-prevent-the-default-behavior-of-an-event/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How do you prevent the default behavior of an event?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-prevent-the-default-behavior-of-an-event/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-redirect-to-a-new-page-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-redirect-to-a-new-page-in-javascript/en-US.json
index 74914720f..adf70b756 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-redirect-to-a-new-page-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-redirect-to-a-new-page-in-javascript/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How do you redirect to a new page in JavaScript?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-redirect-to-a-new-page-in-javascript/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-use-windowhistory-api/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-use-windowhistory-api/en-US.json
index fe24c1204..febe11f82 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-use-windowhistory-api/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-use-windowhistory-api/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How do you use `window.history` API?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-use-windowhistory-api/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.json b/apps/web/src/__generated__/questions/quiz/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.json
index 22cc33320..1d4ab4779 100644
--- a/apps/web/src/__generated__/questions/quiz/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How do you validate form elements using the Constraint Validation API?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/how-is-promiseall-different-from-promiseallsettled/en-US.json b/apps/web/src/__generated__/questions/quiz/how-is-promiseall-different-from-promiseallsettled/en-US.json
index 4f688ee72..4322c4960 100644
--- a/apps/web/src/__generated__/questions/quiz/how-is-promiseall-different-from-promiseallsettled/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/how-is-promiseall-different-from-promiseallsettled/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "How is `Promise.all()` different from `Promise.allSettled()`?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-is-promiseall-different-from-promiseallsettled/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/en-US.json b/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/en-US.json
index 8516d8884..efc1ed883 100644
--- a/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Consider HTML5 as an open web platform. What are the building blocks of HTML5?",
     "topics": [
+      "browser",
       "html"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/pt-BR.json b/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/pt-BR.json
index 57ce88101..9947a8ecc 100644
--- a/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/pt-BR.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Considere HTML5 como uma plataforma web aberta. Quais são os blocos de construção do HTML5?",
     "topics": [
+      "browser",
       "html"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/zh-CN.json b/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/zh-CN.json
index 5cd5bed76..fc52d7155 100644
--- a/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/html5-as-an-open-web-platform-building-blocks/zh-CN.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "将 HTML5 视为一个开放的网络平台。 HTML5 由哪些东西构成？",
     "topics": [
+      "browser",
       "html"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/list.en-US.json b/apps/web/src/__generated__/questions/quiz/list.en-US.json
index 97703089e..7bbb8058b 100644
--- a/apps/web/src/__generated__/questions/quiz/list.en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/list.en-US.json
@@ -49,8 +49,8 @@
     "subtitle": null,
     "title": "Describe event bubbling in JavaScript and browsers",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-bubbling/en-US.mdx"
   },
@@ -77,8 +77,8 @@
     "subtitle": null,
     "title": "Describe event capturing in JavaScript and browsers",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-capturing/en-US.mdx"
   },
@@ -108,6 +108,7 @@
     "subtitle": null,
     "title": "Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx"
@@ -163,8 +164,8 @@
     "subtitle": null,
     "title": "Difference between document `load` event and document `DOMContentLoaded` event?",
     "topics": [
-      "javascript",
-      "html"
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.mdx"
   },
@@ -191,7 +192,8 @@
     "subtitle": null,
     "title": "Difference between: `function Person(){}`, `const person = Person()`, and `const person = new Person()` in JavaScript?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx"
   },
@@ -219,7 +221,7 @@
     "title": "Explain AJAX in as much detail as possible",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx"
   },
@@ -248,8 +250,8 @@
     "subtitle": null,
     "title": "Explain event delegation in JavaScript",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-event-delegation/en-US.mdx"
   },
@@ -276,7 +278,8 @@
     "subtitle": null,
     "title": "Explain `Function.prototype.bind` in JavaScript",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-function-prototype-bind/en-US.mdx"
   },
@@ -331,7 +334,7 @@
     "title": "Explain how JSONP works (and how it's not really Ajax)",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx"
@@ -359,7 +362,8 @@
     "subtitle": null,
     "title": "Explain how prototypal inheritance works in JavaScript",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-prototypal-inheritance-works/en-US.mdx"
   },
@@ -386,7 +390,8 @@
     "subtitle": null,
     "title": "Explain how `this` works in JavaScript",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-this-works-in-javascript/en-US.mdx"
   },
@@ -413,6 +418,7 @@
     "subtitle": null,
     "title": "Explain the concept of a callback function in asynchronous operations",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx"
@@ -440,6 +446,7 @@
     "subtitle": null,
     "title": "Explain the concept of a microtask queue",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-microtask-queue/en-US.mdx"
@@ -552,7 +559,7 @@
     "title": "Explain the concept of Cross-Site Request Forgery (CSRF) and its mitigation techniques",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.mdx"
@@ -580,6 +587,7 @@
     "subtitle": null,
     "title": "Explain the concept of debouncing and throttling",
     "topics": [
+      "async",
       "javascript",
       "performance"
     ],
@@ -689,7 +697,8 @@
     "subtitle": null,
     "title": "Explain the concept of inheritance in ES2015 classes",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx"
   },
@@ -799,6 +808,7 @@
     "subtitle": null,
     "title": "Explain the concept of partial application",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-partial-application/en-US.mdx"
@@ -908,7 +918,8 @@
     "subtitle": null,
     "title": "Explain the concept of the Prototype pattern",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-prototype-pattern/en-US.mdx"
   },
@@ -1017,7 +1028,7 @@
     "title": "Explain the concept of the Web Socket API",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-web-socket-api/en-US.mdx"
   },
@@ -1044,6 +1055,8 @@
     "subtitle": null,
     "title": "Explain the concept of `this` binding in event handlers",
     "topics": [
+      "closure",
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx"
@@ -1098,7 +1111,8 @@
     "subtitle": null,
     "title": "Explain the difference between classical inheritance and prototypal inheritance",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx"
   },
@@ -1125,6 +1139,7 @@
     "subtitle": null,
     "title": "Explain the difference between `document.querySelector()` and `document.getElementById()`",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -1261,6 +1276,7 @@
     "subtitle": null,
     "title": "Explain the difference between synchronous and asynchronous functions in JavaScript",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx"
@@ -1397,6 +1413,7 @@
     "subtitle": null,
     "title": "Explain the different states of a Promise",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-states-of-a-promise/en-US.mdx"
@@ -1424,6 +1441,7 @@
     "subtitle": null,
     "title": "Explain the different ways the `this` keyword can be bound",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx"
@@ -1451,6 +1469,7 @@
     "subtitle": null,
     "title": "Explain the event phases in a browser",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-event-phases-in-a-browser/en-US.mdx"
@@ -1506,7 +1525,7 @@
     "title": "Explain the same-origin policy with regards to JavaScript",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-same-origin-policy-with-regards-to-javascript/en-US.mdx"
@@ -1560,7 +1579,7 @@
     "similarQuestions": [],
     "slug": "explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife",
     "subtitle": null,
-    "title": "Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?",
+    "title": "Explain why the following doesn't work as an IIFE: `function foo(){}();`. What needs to be changed to properly make it an IIFE?",
     "topics": [
       "javascript"
     ],
@@ -1589,6 +1608,7 @@
     "subtitle": null,
     "title": "How can closures be used to create private variables?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-closures-be-used-to-create-private-variables/en-US.mdx"
@@ -1698,6 +1718,7 @@
     "subtitle": null,
     "title": "How can you optimize DOM manipulation for better performance?",
     "topics": [
+      "web-api",
       "javascript",
       "performance"
     ],
@@ -1727,6 +1748,7 @@
     "title": "How can you optimize network requests for better performance?",
     "topics": [
       "javascript",
+      "networking",
       "performance"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-optimize-network-requests-for-better-performance/en-US.mdx"
@@ -1837,6 +1859,7 @@
     "subtitle": null,
     "title": "How can you test asynchronous code in JavaScript?",
     "topics": [
+      "async",
       "javascript",
       "testing"
     ],
@@ -1865,6 +1888,7 @@
     "subtitle": null,
     "title": "How do currying and partial application differ from each other?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.mdx"
@@ -1892,6 +1916,7 @@
     "subtitle": null,
     "title": "How do `<iframe>` on a page communicate?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -1948,7 +1973,7 @@
     "title": "How do you abort a web request using `AbortController` in JavaScript?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx"
   },
@@ -2002,6 +2027,7 @@
     "subtitle": null,
     "title": "How do you add, remove, and modify HTML elements using JavaScript?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -2165,7 +2191,8 @@
     "subtitle": null,
     "title": "How do you create a constructor function?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-create-a-constructor-function/en-US.mdx"
   },
@@ -2192,6 +2219,7 @@
     "subtitle": null,
     "title": "How do you detect if JavaScript is disabled on a page?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.mdx"
@@ -2219,6 +2247,7 @@
     "subtitle": null,
     "title": "How do you get the query string values of the current page in JavaScript?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx"
@@ -2246,6 +2275,7 @@
     "subtitle": null,
     "title": "How do you handle errors in asynchronous operations?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx"
@@ -2328,7 +2358,7 @@
     "title": "How do you make an HTTP request using the Fetch API?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.mdx"
   },
@@ -2355,8 +2385,9 @@
     "subtitle": null,
     "title": "How do you manipulate CSS styles using JavaScript?",
     "topics": [
-      "javascript",
-      "css"
+      "css",
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-manipulate-css-styles-using-javascript/en-US.mdx"
   },
@@ -2410,6 +2441,7 @@
     "subtitle": null,
     "title": "How do you prevent the default behavior of an event?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-prevent-the-default-behavior-of-an-event/en-US.mdx"
@@ -2437,6 +2469,7 @@
     "subtitle": null,
     "title": "How do you redirect to a new page in JavaScript?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-redirect-to-a-new-page-in-javascript/en-US.mdx"
@@ -2491,6 +2524,7 @@
     "subtitle": null,
     "title": "How do you use `window.history` API?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-use-windowhistory-api/en-US.mdx"
@@ -2518,6 +2552,7 @@
     "subtitle": null,
     "title": "How do you validate form elements using the Constraint Validation API?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx"
@@ -2627,6 +2662,7 @@
     "subtitle": null,
     "title": "How is `Promise.all()` different from `Promise.allSettled()`?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-is-promiseall-different-from-promiseallsettled/en-US.mdx"
@@ -2654,6 +2690,7 @@
     "subtitle": null,
     "title": "Provide some examples of how currying and partial application can be used",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx"
@@ -2708,6 +2745,7 @@
     "subtitle": null,
     "title": "What are callback functions and how are they used?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx"
@@ -2789,6 +2827,7 @@
     "subtitle": null,
     "title": "What are event listeners and how are they used?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-event-listeners-and-how-are-they-used/en-US.mdx"
@@ -2979,6 +3018,7 @@
     "subtitle": null,
     "title": "What are Progressive Web Applications (PWAs)?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-progressive-web-applications-pwas/en-US.mdx"
@@ -3087,7 +3127,8 @@
     "subtitle": null,
     "title": "What are server-sent events?",
     "topics": [
-      "javascript"
+      "javascript",
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-server-sent-events/en-US.mdx"
   },
@@ -3308,6 +3349,7 @@
     "subtitle": null,
     "title": "What are some techniques for reducing reflows and repaints?",
     "topics": [
+      "browser",
       "javascript",
       "performance"
     ],
@@ -3475,7 +3517,7 @@
     "title": "What are the advantages and disadvantages of using AJAX?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx"
   },
@@ -3556,6 +3598,7 @@
     "subtitle": null,
     "title": "What are the benefits of using currying and partial application?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.mdx"
@@ -3610,7 +3653,8 @@
     "subtitle": null,
     "title": "What are the common pitfalls of using the `this` keyword?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.mdx"
   },
@@ -3637,7 +3681,8 @@
     "subtitle": null,
     "title": "What are the differences between JavaScript ES2015 classes and ES5 function constructors?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx"
   },
@@ -3721,7 +3766,7 @@
     "title": "What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx"
   },
@@ -3858,7 +3903,7 @@
     "title": "What are the different ways to make an API call in JavaScript?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.mdx"
   },
@@ -3939,6 +3984,7 @@
     "subtitle": null,
     "title": "What are the potential pitfalls of using closures?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.mdx"
@@ -3968,6 +4014,7 @@
     "subtitle": null,
     "title": "What are the pros and cons of using Promises instead of callbacks in JavaScript?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx"
@@ -4049,6 +4096,7 @@
     "subtitle": null,
     "title": "What are Web Workers and how can they be used to improve performance?",
     "topics": [
+      "web-api",
       "javascript",
       "performance"
     ],
@@ -4136,6 +4184,7 @@
     "subtitle": null,
     "title": "What is a closure in JavaScript, and how/why would you use one?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx"
@@ -4163,6 +4212,7 @@
     "subtitle": null,
     "title": "What is async/await and how does it simplify asynchronous code?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.mdx"
@@ -4218,6 +4268,7 @@
     "subtitle": null,
     "title": "What is currying and how does it work?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-currying-and-how-does-it-work/en-US.mdx"
@@ -4356,7 +4407,8 @@
     "subtitle": null,
     "title": "What is recursion and how is it used in JavaScript?",
     "topics": [
-      "javascript"
+      "javascript",
+      "recursion"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx"
   },
@@ -4545,8 +4597,9 @@
     "subtitle": null,
     "title": "What is the difference between `event.preventDefault()` and `event.stopPropagation()`?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.mdx"
   },
@@ -4573,8 +4626,9 @@
     "subtitle": null,
     "title": "What is the difference between `innerHTML` and `textContent`?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-innerhtml-and-textcontent/en-US.mdx"
   },
@@ -4601,8 +4655,9 @@
     "subtitle": null,
     "title": "What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx"
   },
@@ -4629,6 +4684,7 @@
     "subtitle": null,
     "title": "What is the difference between `setTimeout()`, `setImmediate()`, and `process.nextTick()`?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx"
@@ -4656,6 +4712,7 @@
     "subtitle": null,
     "title": "What is the difference between the Window object and the Document object?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx"
@@ -4793,7 +4850,8 @@
     "subtitle": null,
     "title": "What is the prototype chain and how does it work?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.mdx"
   },
@@ -4874,7 +4932,8 @@
     "subtitle": null,
     "title": "What is the purpose of the `new` keyword?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-new-keyword/en-US.mdx"
   },
@@ -4982,6 +5041,7 @@
     "subtitle": null,
     "title": "What is the use of `Promise.all()`",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-use-of-promiseall/en-US.mdx"
@@ -5144,6 +5204,7 @@
     "subtitle": null,
     "title": "What's the difference between an \"attribute\" and a \"property\" in the DOM?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -5199,6 +5260,7 @@
     "subtitle": null,
     "title": "When would you use `document.write()`?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -5227,7 +5289,8 @@
     "subtitle": null,
     "title": "Why is extending built-in JavaScript objects not a good idea?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx"
   },
@@ -5281,7 +5344,8 @@
     "subtitle": null,
     "title": "Why might you want to create static class members in JavaScript?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-you-might-want-to-create-static-class-members/en-US.mdx"
   },
@@ -5608,6 +5672,7 @@
     "subtitle": null,
     "title": "Explain how a browser determines what elements match a CSS selector.",
     "topics": [
+      "browser",
       "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.mdx"
@@ -5883,6 +5948,7 @@
     "subtitle": null,
     "title": "Consider HTML5 as an open web platform. What are the building blocks of HTML5?",
     "topics": [
+      "browser",
       "html"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.mdx"
@@ -5938,6 +6004,7 @@
     "subtitle": null,
     "title": "What are `data-` attributes good for?",
     "topics": [
+      "web-api",
       "html",
       "testing"
     ],
@@ -6022,8 +6089,8 @@
     "subtitle": null,
     "title": "What are the different ways to visually hide content (and make it available only for screen readers)?",
     "topics": [
-      "css",
-      "a11y"
+      "a11y",
+      "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.mdx"
   },
@@ -6269,6 +6336,7 @@
     "subtitle": null,
     "title": "What's the difference between feature detection, feature inference, and using the UA string?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.mdx"
@@ -6350,6 +6418,7 @@
     "subtitle": "Does this event have disadvantages? Do you know any alternatives, and why would you use those?",
     "title": "Why would you use something like the `load` event?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/list.pt-BR.json b/apps/web/src/__generated__/questions/quiz/list.pt-BR.json
index 683544c3a..672d1f72f 100644
--- a/apps/web/src/__generated__/questions/quiz/list.pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/list.pt-BR.json
@@ -49,8 +49,8 @@
     "subtitle": null,
     "title": "Descreva a propagação de eventos",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-bubbling/pt-BR.mdx"
   },
@@ -77,8 +77,8 @@
     "subtitle": null,
     "title": "Describe event capturing in JavaScript and browsers",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-capturing/en-US.mdx"
   },
@@ -108,6 +108,7 @@
     "subtitle": null,
     "title": "Descreva a diferença entre cookie, `sessionStorage` e `localStorage`.",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.mdx"
@@ -163,8 +164,8 @@
     "subtitle": null,
     "title": "Qual a diferença entre o evento `load` do documento e o evento `DOMContentLoaded` do documento?",
     "topics": [
-      "javascript",
-      "html"
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-document-load-event-and-document-domcontentloaded-event/pt-BR.mdx"
   },
@@ -191,7 +192,8 @@
     "subtitle": null,
     "title": "Diferença entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.mdx"
   },
@@ -219,7 +221,7 @@
     "title": "Explique o Ajax com o máximo de detalhes possível.",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-ajax-in-as-much-detail-as-possible/pt-BR.mdx"
   },
@@ -248,8 +250,8 @@
     "subtitle": null,
     "title": "Explique delegação do evento",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-event-delegation/pt-BR.mdx"
   },
@@ -276,7 +278,8 @@
     "subtitle": null,
     "title": "Explique `Function.prototype.bind`",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-function-prototype-bind/pt-BR.mdx"
   },
@@ -331,7 +334,7 @@
     "title": "Explique como o JSONP funciona (e como ele não é Ajax)",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.mdx"
@@ -359,7 +362,8 @@
     "subtitle": null,
     "title": "Explique como funciona a herança de protótipos",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-prototypal-inheritance-works/pt-BR.mdx"
   },
@@ -386,7 +390,8 @@
     "subtitle": null,
     "title": "Explique como `this` funciona em JavaScript",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-this-works-in-javascript/pt-BR.mdx"
   },
@@ -413,6 +418,7 @@
     "subtitle": null,
     "title": "Explain the concept of a callback function in asynchronous operations",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx"
@@ -440,6 +446,7 @@
     "subtitle": null,
     "title": "Explain the concept of a microtask queue",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-microtask-queue/en-US.mdx"
@@ -552,7 +559,7 @@
     "title": "Explain the concept of Cross-Site Request Forgery (CSRF) and its mitigation techniques",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.mdx"
@@ -580,6 +587,7 @@
     "subtitle": null,
     "title": "Explain the concept of debouncing and throttling",
     "topics": [
+      "async",
       "javascript",
       "performance"
     ],
@@ -689,7 +697,8 @@
     "subtitle": null,
     "title": "Explain the concept of inheritance in ES2015 classes",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx"
   },
@@ -799,6 +808,7 @@
     "subtitle": null,
     "title": "Explain the concept of partial application",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-partial-application/en-US.mdx"
@@ -908,7 +918,8 @@
     "subtitle": null,
     "title": "Explain the concept of the Prototype pattern",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-prototype-pattern/en-US.mdx"
   },
@@ -1017,7 +1028,7 @@
     "title": "Explain the concept of the Web Socket API",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-web-socket-api/en-US.mdx"
   },
@@ -1044,6 +1055,8 @@
     "subtitle": null,
     "title": "Explain the concept of `this` binding in event handlers",
     "topics": [
+      "closure",
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx"
@@ -1098,7 +1111,8 @@
     "subtitle": null,
     "title": "Explain the difference between classical inheritance and prototypal inheritance",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx"
   },
@@ -1125,6 +1139,7 @@
     "subtitle": null,
     "title": "Explain the difference between `document.querySelector()` and `document.getElementById()`",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -1261,6 +1276,7 @@
     "subtitle": null,
     "title": "Explique a diferença entre funções síncronas e assíncronas",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/pt-BR.mdx"
@@ -1397,6 +1413,7 @@
     "subtitle": null,
     "title": "Explain the different states of a Promise",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-states-of-a-promise/en-US.mdx"
@@ -1424,6 +1441,7 @@
     "subtitle": null,
     "title": "Explain the different ways the `this` keyword can be bound",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx"
@@ -1451,6 +1469,7 @@
     "subtitle": null,
     "title": "Explain the event phases in a browser",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-event-phases-in-a-browser/en-US.mdx"
@@ -1506,7 +1525,7 @@
     "title": "Explique a política de mesma origem em relação ao JavaScript",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-same-origin-policy-with-regards-to-javascript/pt-BR.mdx"
@@ -1589,6 +1608,7 @@
     "subtitle": null,
     "title": "How can closures be used to create private variables?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-closures-be-used-to-create-private-variables/en-US.mdx"
@@ -1698,6 +1718,7 @@
     "subtitle": null,
     "title": "How can you optimize DOM manipulation for better performance?",
     "topics": [
+      "web-api",
       "javascript",
       "performance"
     ],
@@ -1727,6 +1748,7 @@
     "title": "How can you optimize network requests for better performance?",
     "topics": [
       "javascript",
+      "networking",
       "performance"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-optimize-network-requests-for-better-performance/en-US.mdx"
@@ -1837,6 +1859,7 @@
     "subtitle": null,
     "title": "How can you test asynchronous code in JavaScript?",
     "topics": [
+      "async",
       "javascript",
       "testing"
     ],
@@ -1865,6 +1888,7 @@
     "subtitle": null,
     "title": "How do currying and partial application differ from each other?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.mdx"
@@ -1892,6 +1916,7 @@
     "subtitle": null,
     "title": "How do `<iframe>` on a page communicate?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -1948,7 +1973,7 @@
     "title": "How do you abort a web request using `AbortController` in JavaScript?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx"
   },
@@ -2002,6 +2027,7 @@
     "subtitle": null,
     "title": "How do you add, remove, and modify HTML elements using JavaScript?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -2165,7 +2191,8 @@
     "subtitle": null,
     "title": "How do you create a constructor function?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-create-a-constructor-function/en-US.mdx"
   },
@@ -2192,6 +2219,7 @@
     "subtitle": null,
     "title": "How do you detect if JavaScript is disabled on a page?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.mdx"
@@ -2219,6 +2247,7 @@
     "subtitle": null,
     "title": "How do you get the query string values of the current page in JavaScript?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx"
@@ -2246,6 +2275,7 @@
     "subtitle": null,
     "title": "How do you handle errors in asynchronous operations?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx"
@@ -2328,7 +2358,7 @@
     "title": "How do you make an HTTP request using the Fetch API?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.mdx"
   },
@@ -2355,8 +2385,9 @@
     "subtitle": null,
     "title": "How do you manipulate CSS styles using JavaScript?",
     "topics": [
-      "javascript",
-      "css"
+      "css",
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-manipulate-css-styles-using-javascript/en-US.mdx"
   },
@@ -2410,6 +2441,7 @@
     "subtitle": null,
     "title": "How do you prevent the default behavior of an event?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-prevent-the-default-behavior-of-an-event/en-US.mdx"
@@ -2437,6 +2469,7 @@
     "subtitle": null,
     "title": "How do you redirect to a new page in JavaScript?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-redirect-to-a-new-page-in-javascript/en-US.mdx"
@@ -2491,6 +2524,7 @@
     "subtitle": null,
     "title": "How do you use `window.history` API?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-use-windowhistory-api/en-US.mdx"
@@ -2518,6 +2552,7 @@
     "subtitle": null,
     "title": "How do you validate form elements using the Constraint Validation API?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx"
@@ -2627,6 +2662,7 @@
     "subtitle": null,
     "title": "How is `Promise.all()` different from `Promise.allSettled()`?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-is-promiseall-different-from-promiseallsettled/en-US.mdx"
@@ -2654,6 +2690,7 @@
     "subtitle": null,
     "title": "Provide some examples of how currying and partial application can be used",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx"
@@ -2708,6 +2745,7 @@
     "subtitle": null,
     "title": "What are callback functions and how are they used?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx"
@@ -2789,6 +2827,7 @@
     "subtitle": null,
     "title": "What are event listeners and how are they used?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-event-listeners-and-how-are-they-used/en-US.mdx"
@@ -2979,6 +3018,7 @@
     "subtitle": null,
     "title": "What are Progressive Web Applications (PWAs)?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-progressive-web-applications-pwas/en-US.mdx"
@@ -3087,7 +3127,8 @@
     "subtitle": null,
     "title": "What are server-sent events?",
     "topics": [
-      "javascript"
+      "javascript",
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-server-sent-events/en-US.mdx"
   },
@@ -3308,6 +3349,7 @@
     "subtitle": null,
     "title": "What are some techniques for reducing reflows and repaints?",
     "topics": [
+      "browser",
       "javascript",
       "performance"
     ],
@@ -3475,7 +3517,7 @@
     "title": "Quais são as vantagens e desvantagens de usar o Ajax?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.mdx"
   },
@@ -3556,6 +3598,7 @@
     "subtitle": null,
     "title": "What are the benefits of using currying and partial application?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.mdx"
@@ -3610,7 +3653,8 @@
     "subtitle": null,
     "title": "What are the common pitfalls of using the `this` keyword?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.mdx"
   },
@@ -3637,7 +3681,8 @@
     "subtitle": null,
     "title": "Quais são as diferenças entre a classe ES2015 e os construtores de função ES5?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/pt-BR.mdx"
   },
@@ -3721,7 +3766,7 @@
     "title": "What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx"
   },
@@ -3858,7 +3903,7 @@
     "title": "What are the different ways to make an API call in JavaScript?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.mdx"
   },
@@ -3939,6 +3984,7 @@
     "subtitle": null,
     "title": "What are the potential pitfalls of using closures?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.mdx"
@@ -3968,6 +4014,7 @@
     "subtitle": null,
     "title": "Quais são os prós e contras de usar Promises em vez de callbacks?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/pt-BR.mdx"
@@ -4049,6 +4096,7 @@
     "subtitle": null,
     "title": "What are Web Workers and how can they be used to improve performance?",
     "topics": [
+      "web-api",
       "javascript",
       "performance"
     ],
@@ -4136,6 +4184,7 @@
     "subtitle": null,
     "title": "O que é um closure e como/por que você usaria um?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-a-closure-and-how-why-would-you-use-one/pt-BR.mdx"
@@ -4163,6 +4212,7 @@
     "subtitle": null,
     "title": "What is async/await and how does it simplify asynchronous code?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.mdx"
@@ -4218,6 +4268,7 @@
     "subtitle": null,
     "title": "What is currying and how does it work?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-currying-and-how-does-it-work/en-US.mdx"
@@ -4356,7 +4407,8 @@
     "subtitle": null,
     "title": "What is recursion and how is it used in JavaScript?",
     "topics": [
-      "javascript"
+      "javascript",
+      "recursion"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx"
   },
@@ -4545,8 +4597,9 @@
     "subtitle": null,
     "title": "What is the difference between `event.preventDefault()` and `event.stopPropagation()`?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.mdx"
   },
@@ -4573,8 +4626,9 @@
     "subtitle": null,
     "title": "What is the difference between `innerHTML` and `textContent`?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-innerhtml-and-textcontent/en-US.mdx"
   },
@@ -4601,8 +4655,9 @@
     "subtitle": null,
     "title": "What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx"
   },
@@ -4629,6 +4684,7 @@
     "subtitle": null,
     "title": "What is the difference between `setTimeout()`, `setImmediate()`, and `process.nextTick()`?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx"
@@ -4656,6 +4712,7 @@
     "subtitle": null,
     "title": "What is the difference between the Window object and the Document object?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx"
@@ -4793,7 +4850,8 @@
     "subtitle": null,
     "title": "What is the prototype chain and how does it work?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.mdx"
   },
@@ -4874,7 +4932,8 @@
     "subtitle": null,
     "title": "What is the purpose of the `new` keyword?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-new-keyword/en-US.mdx"
   },
@@ -4982,6 +5041,7 @@
     "subtitle": null,
     "title": "What is the use of `Promise.all()`",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-use-of-promiseall/en-US.mdx"
@@ -5144,6 +5204,7 @@
     "subtitle": null,
     "title": "Qual é a diferença entre um \"atributo\" e uma \"propriedade\"?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -5199,6 +5260,7 @@
     "subtitle": null,
     "title": "Quando você usaria `document.write()`?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -5227,7 +5289,8 @@
     "subtitle": null,
     "title": "Por que estender objetos JavaScript nativos não é uma boa ideia?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/pt-BR.mdx"
   },
@@ -5281,7 +5344,8 @@
     "subtitle": null,
     "title": "Por que você pode querer criar membros de classe estáticos?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-you-might-want-to-create-static-class-members/pt-BR.mdx"
   },
@@ -5608,6 +5672,7 @@
     "subtitle": null,
     "title": "Explique como um navegador determina quais elementos correspondem a um seletor CSS.",
     "topics": [
+      "browser",
       "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/pt-BR.mdx"
@@ -5883,6 +5948,7 @@
     "subtitle": null,
     "title": "Considere HTML5 como uma plataforma web aberta. Quais são os blocos de construção do HTML5?",
     "topics": [
+      "browser",
       "html"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/pt-BR.mdx"
@@ -5938,6 +6004,7 @@
     "subtitle": null,
     "title": "Para que servem os atributos `data-`?",
     "topics": [
+      "web-api",
       "html",
       "testing"
     ],
@@ -6022,8 +6089,8 @@
     "subtitle": null,
     "title": "Quais são as diferentes maneiras de esconder conteúdo visualmente (e torná-lo disponível apenas para leitores de tela)?",
     "topics": [
-      "css",
-      "a11y"
+      "a11y",
+      "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.mdx"
   },
@@ -6269,6 +6336,7 @@
     "subtitle": null,
     "title": "Qual é a diferença entre detecção de recurso, inferência de recurso e uso da string UA?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/pt-BR.mdx"
@@ -6350,6 +6418,7 @@
     "subtitle": "Este evento tem desvantagens? Você conhece alguma alternativa, e por que as usaria?",
     "title": "Por que você usaria algo como o evento `load`?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/list.zh-CN.json b/apps/web/src/__generated__/questions/quiz/list.zh-CN.json
index 5e16af9a4..fa510ff91 100644
--- a/apps/web/src/__generated__/questions/quiz/list.zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/list.zh-CN.json
@@ -49,8 +49,8 @@
     "subtitle": null,
     "title": "描述事件冒泡过程",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-bubbling/zh-CN.mdx"
   },
@@ -77,8 +77,8 @@
     "subtitle": null,
     "title": "Describe event capturing in JavaScript and browsers",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-capturing/en-US.mdx"
   },
@@ -108,6 +108,7 @@
     "subtitle": null,
     "title": "描述cookie、 `sessionStorage` 和 `localStorage` 之间的差异。",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx"
@@ -163,8 +164,8 @@
     "subtitle": null,
     "title": "Document `load` 事件和 `DOMContentLoaded` 事件之间的区别？",
     "topics": [
-      "javascript",
-      "html"
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.mdx"
   },
@@ -191,7 +192,8 @@
     "subtitle": null,
     "title": "比较差异: `function Person(){}`, `var person = Person()`, 和 `var person = new Person()`?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx"
   },
@@ -219,7 +221,7 @@
     "title": "尽可能详细地解释Ajax",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx"
   },
@@ -248,8 +250,8 @@
     "subtitle": null,
     "title": "解释事件委托",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-event-delegation/zh-CN.mdx"
   },
@@ -276,7 +278,8 @@
     "subtitle": null,
     "title": "解释 `Function.prototype.bind`",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-function-prototype-bind/zh-CN.mdx"
   },
@@ -331,7 +334,7 @@
     "title": "解释JSONP 如何工作(以及它为什么不是真正的 Ajax)",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx"
@@ -359,7 +362,8 @@
     "subtitle": null,
     "title": "解释原型继承如何工作",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx"
   },
@@ -386,7 +390,8 @@
     "subtitle": null,
     "title": "解释 JavaScript `this` 如何工作",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-this-works-in-javascript/zh-CN.mdx"
   },
@@ -413,6 +418,7 @@
     "subtitle": null,
     "title": "Explain the concept of a callback function in asynchronous operations",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx"
@@ -440,6 +446,7 @@
     "subtitle": null,
     "title": "Explain the concept of a microtask queue",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-a-microtask-queue/en-US.mdx"
@@ -552,7 +559,7 @@
     "title": "Explain the concept of Cross-Site Request Forgery (CSRF) and its mitigation techniques",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.mdx"
@@ -580,6 +587,7 @@
     "subtitle": null,
     "title": "Explain the concept of debouncing and throttling",
     "topics": [
+      "async",
       "javascript",
       "performance"
     ],
@@ -689,7 +697,8 @@
     "subtitle": null,
     "title": "Explain the concept of inheritance in ES2015 classes",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx"
   },
@@ -799,6 +808,7 @@
     "subtitle": null,
     "title": "Explain the concept of partial application",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-partial-application/en-US.mdx"
@@ -908,7 +918,8 @@
     "subtitle": null,
     "title": "Explain the concept of the Prototype pattern",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-prototype-pattern/en-US.mdx"
   },
@@ -1017,7 +1028,7 @@
     "title": "Explain the concept of the Web Socket API",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-the-web-socket-api/en-US.mdx"
   },
@@ -1044,6 +1055,8 @@
     "subtitle": null,
     "title": "Explain the concept of `this` binding in event handlers",
     "topics": [
+      "closure",
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx"
@@ -1098,7 +1111,8 @@
     "subtitle": null,
     "title": "Explain the difference between classical inheritance and prototypal inheritance",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx"
   },
@@ -1125,6 +1139,7 @@
     "subtitle": null,
     "title": "Explain the difference between `document.querySelector()` and `document.getElementById()`",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -1261,6 +1276,7 @@
     "subtitle": null,
     "title": "解释同步函数和异步函数之间的差异",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.mdx"
@@ -1397,6 +1413,7 @@
     "subtitle": null,
     "title": "Explain the different states of a Promise",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-states-of-a-promise/en-US.mdx"
@@ -1424,6 +1441,7 @@
     "subtitle": null,
     "title": "Explain the different ways the `this` keyword can be bound",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx"
@@ -1451,6 +1469,7 @@
     "subtitle": null,
     "title": "Explain the event phases in a browser",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-event-phases-in-a-browser/en-US.mdx"
@@ -1506,7 +1525,7 @@
     "title": "解释与JavaScript有关的同源策略。",
     "topics": [
       "javascript",
-      "network",
+      "networking",
       "security"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx"
@@ -1589,6 +1608,7 @@
     "subtitle": null,
     "title": "How can closures be used to create private variables?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-closures-be-used-to-create-private-variables/en-US.mdx"
@@ -1698,6 +1718,7 @@
     "subtitle": null,
     "title": "How can you optimize DOM manipulation for better performance?",
     "topics": [
+      "web-api",
       "javascript",
       "performance"
     ],
@@ -1727,6 +1748,7 @@
     "title": "How can you optimize network requests for better performance?",
     "topics": [
       "javascript",
+      "networking",
       "performance"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-can-you-optimize-network-requests-for-better-performance/en-US.mdx"
@@ -1837,6 +1859,7 @@
     "subtitle": null,
     "title": "How can you test asynchronous code in JavaScript?",
     "topics": [
+      "async",
       "javascript",
       "testing"
     ],
@@ -1865,6 +1888,7 @@
     "subtitle": null,
     "title": "How do currying and partial application differ from each other?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.mdx"
@@ -1892,6 +1916,7 @@
     "subtitle": null,
     "title": "How do `<iframe>` on a page communicate?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -1948,7 +1973,7 @@
     "title": "How do you abort a web request using `AbortController` in JavaScript?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx"
   },
@@ -2002,6 +2027,7 @@
     "subtitle": null,
     "title": "How do you add, remove, and modify HTML elements using JavaScript?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -2165,7 +2191,8 @@
     "subtitle": null,
     "title": "How do you create a constructor function?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-create-a-constructor-function/en-US.mdx"
   },
@@ -2192,6 +2219,7 @@
     "subtitle": null,
     "title": "How do you detect if JavaScript is disabled on a page?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.mdx"
@@ -2219,6 +2247,7 @@
     "subtitle": null,
     "title": "How do you get the query string values of the current page in JavaScript?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx"
@@ -2246,6 +2275,7 @@
     "subtitle": null,
     "title": "How do you handle errors in asynchronous operations?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx"
@@ -2328,7 +2358,7 @@
     "title": "How do you make an HTTP request using the Fetch API?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.mdx"
   },
@@ -2355,8 +2385,9 @@
     "subtitle": null,
     "title": "How do you manipulate CSS styles using JavaScript?",
     "topics": [
-      "javascript",
-      "css"
+      "css",
+      "web-api",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-manipulate-css-styles-using-javascript/en-US.mdx"
   },
@@ -2410,6 +2441,7 @@
     "subtitle": null,
     "title": "How do you prevent the default behavior of an event?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-prevent-the-default-behavior-of-an-event/en-US.mdx"
@@ -2437,6 +2469,7 @@
     "subtitle": null,
     "title": "How do you redirect to a new page in JavaScript?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-redirect-to-a-new-page-in-javascript/en-US.mdx"
@@ -2491,6 +2524,7 @@
     "subtitle": null,
     "title": "How do you use `window.history` API?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-use-windowhistory-api/en-US.mdx"
@@ -2518,6 +2552,7 @@
     "subtitle": null,
     "title": "How do you validate form elements using the Constraint Validation API?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx"
@@ -2627,6 +2662,7 @@
     "subtitle": null,
     "title": "How is `Promise.all()` different from `Promise.allSettled()`?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/how-is-promiseall-different-from-promiseallsettled/en-US.mdx"
@@ -2654,6 +2690,7 @@
     "subtitle": null,
     "title": "Provide some examples of how currying and partial application can be used",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx"
@@ -2708,6 +2745,7 @@
     "subtitle": null,
     "title": "What are callback functions and how are they used?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx"
@@ -2789,6 +2827,7 @@
     "subtitle": null,
     "title": "What are event listeners and how are they used?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-event-listeners-and-how-are-they-used/en-US.mdx"
@@ -2979,6 +3018,7 @@
     "subtitle": null,
     "title": "What are Progressive Web Applications (PWAs)?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-progressive-web-applications-pwas/en-US.mdx"
@@ -3087,7 +3127,8 @@
     "subtitle": null,
     "title": "What are server-sent events?",
     "topics": [
-      "javascript"
+      "javascript",
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-server-sent-events/en-US.mdx"
   },
@@ -3308,6 +3349,7 @@
     "subtitle": null,
     "title": "What are some techniques for reducing reflows and repaints?",
     "topics": [
+      "browser",
       "javascript",
       "performance"
     ],
@@ -3475,7 +3517,7 @@
     "title": "使用Ajax的利弊是什么？",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx"
   },
@@ -3556,6 +3598,7 @@
     "subtitle": null,
     "title": "What are the benefits of using currying and partial application?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.mdx"
@@ -3610,7 +3653,8 @@
     "subtitle": null,
     "title": "What are the common pitfalls of using the `this` keyword?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.mdx"
   },
@@ -3637,7 +3681,8 @@
     "subtitle": null,
     "title": "ES2015类和 ES5 函数构造函数之间有什么区别？",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.mdx"
   },
@@ -3721,7 +3766,7 @@
     "title": "What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx"
   },
@@ -3858,7 +3903,7 @@
     "title": "What are the different ways to make an API call in JavaScript?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.mdx"
   },
@@ -3939,6 +3984,7 @@
     "subtitle": null,
     "title": "What are the potential pitfalls of using closures?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.mdx"
@@ -3968,6 +4014,7 @@
     "subtitle": null,
     "title": "使用Promise而不是回调的利弊是什么？",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx"
@@ -4049,6 +4096,7 @@
     "subtitle": null,
     "title": "What are Web Workers and how can they be used to improve performance?",
     "topics": [
+      "web-api",
       "javascript",
       "performance"
     ],
@@ -4136,6 +4184,7 @@
     "subtitle": null,
     "title": "什么是闭包？ 你如何/为何使用？",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-a-closure-and-how-why-would-you-use-one/zh-CN.mdx"
@@ -4163,6 +4212,7 @@
     "subtitle": null,
     "title": "What is async/await and how does it simplify asynchronous code?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.mdx"
@@ -4218,6 +4268,7 @@
     "subtitle": null,
     "title": "What is currying and how does it work?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-currying-and-how-does-it-work/en-US.mdx"
@@ -4356,7 +4407,8 @@
     "subtitle": null,
     "title": "What is recursion and how is it used in JavaScript?",
     "topics": [
-      "javascript"
+      "javascript",
+      "recursion"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx"
   },
@@ -4545,8 +4597,9 @@
     "subtitle": null,
     "title": "What is the difference between `event.preventDefault()` and `event.stopPropagation()`?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.mdx"
   },
@@ -4573,8 +4626,9 @@
     "subtitle": null,
     "title": "What is the difference between `innerHTML` and `textContent`?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-innerhtml-and-textcontent/en-US.mdx"
   },
@@ -4601,8 +4655,9 @@
     "subtitle": null,
     "title": "What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx"
   },
@@ -4629,6 +4684,7 @@
     "subtitle": null,
     "title": "What is the difference between `setTimeout()`, `setImmediate()`, and `process.nextTick()`?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx"
@@ -4656,6 +4712,7 @@
     "subtitle": null,
     "title": "What is the difference between the Window object and the Document object?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx"
@@ -4793,7 +4850,8 @@
     "subtitle": null,
     "title": "What is the prototype chain and how does it work?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.mdx"
   },
@@ -4874,7 +4932,8 @@
     "subtitle": null,
     "title": "What is the purpose of the `new` keyword?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-new-keyword/en-US.mdx"
   },
@@ -4982,6 +5041,7 @@
     "subtitle": null,
     "title": "What is the use of `Promise.all()`",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-use-of-promiseall/en-US.mdx"
@@ -5144,6 +5204,7 @@
     "subtitle": null,
     "title": "\"attribute\" 和 \"property\" 之间有什么区别？",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -5199,6 +5260,7 @@
     "subtitle": null,
     "title": "您什么时候使用 `document.write()`？",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
@@ -5227,7 +5289,8 @@
     "subtitle": null,
     "title": "为什么扩展内置的 JavaScript 对象不是一个好主意？",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.mdx"
   },
@@ -5281,7 +5344,8 @@
     "subtitle": null,
     "title": "为什么你想要创建静态类成员？",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-you-might-want-to-create-static-class-members/zh-CN.mdx"
   },
@@ -5608,6 +5672,7 @@
     "subtitle": null,
     "title": "解释浏览器如何决定什么元素与 CSS 选择器匹配。",
     "topics": [
+      "browser",
       "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.mdx"
@@ -5883,6 +5948,7 @@
     "subtitle": null,
     "title": "将 HTML5 视为一个开放的网络平台。 HTML5 由哪些东西构成？",
     "topics": [
+      "browser",
       "html"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx"
@@ -5938,6 +6004,7 @@
     "subtitle": null,
     "title": "`data-`属性有什么用？",
     "topics": [
+      "web-api",
       "html",
       "testing"
     ],
@@ -6022,8 +6089,8 @@
     "subtitle": null,
     "title": "有哪些不同的方法可以在视觉上隐藏内容（并使其仅对屏幕阅读器可用）？",
     "topics": [
-      "css",
-      "a11y"
+      "a11y",
+      "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.mdx"
   },
@@ -6269,6 +6336,7 @@
     "subtitle": null,
     "title": "功能检测、功能推断和使用UA字符串之间有什么区别？",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.mdx"
@@ -6350,6 +6418,7 @@
     "subtitle": "此事件是否有缺点？ 您是否知道任何替代方法，以及为什么要使用这些方法？",
     "title": "你为什么要使用 `load` 事件？",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.json b/apps/web/src/__generated__/questions/quiz/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.json
index 182b4a91f..269c4c31b 100644
--- a/apps/web/src/__generated__/questions/quiz/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Provide some examples of how currying and partial application can be used",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-callback-functions-and-how-are-they-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-callback-functions-and-how-are-they-used/en-US.json
index 6417ce902..9929ae9c2 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-callback-functions-and-how-are-they-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-callback-functions-and-how-are-they-used/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What are callback functions and how are they used?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/en-US.json
index 2f8248c23..6164b3003 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What are `data-` attributes good for?",
     "topics": [
+      "web-api",
       "html",
       "testing"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/pt-BR.json
index c245a8b9c..cae39e2d8 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/pt-BR.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Para que servem os atributos `data-`?",
     "topics": [
+      "web-api",
       "html",
       "testing"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/zh-CN.json
index b164816a0..30047f8a4 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-data-attributes-good-for/zh-CN.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "`data-`属性有什么用？",
     "topics": [
+      "web-api",
       "html",
       "testing"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-event-listeners-and-how-are-they-used/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-event-listeners-and-how-are-they-used/en-US.json
index 32b15857c..1916f9ea3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-event-listeners-and-how-are-they-used/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-event-listeners-and-how-are-they-used/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What are event listeners and how are they used?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-event-listeners-and-how-are-they-used/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-progressive-web-applications-pwas/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-progressive-web-applications-pwas/en-US.json
index a1285c459..72a6b19fb 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-progressive-web-applications-pwas/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-progressive-web-applications-pwas/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What are Progressive Web Applications (PWAs)?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-progressive-web-applications-pwas/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-server-sent-events/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-server-sent-events/en-US.json
index bfa8fa355..7f7472dda 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-server-sent-events/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-server-sent-events/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "What are server-sent events?",
     "topics": [
-      "javascript"
+      "javascript",
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-server-sent-events/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.json
index 545e533bb..ebc7d0a3b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What are some techniques for reducing reflows and repaints?",
     "topics": [
+      "browser",
       "javascript",
       "performance"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.json
index e98b1f6b4..d0db63bf9 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.json
@@ -25,7 +25,7 @@
     "title": "What are the advantages and disadvantages of using AJAX?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.json
index 5e16b2954..d265229fc 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.json
@@ -25,7 +25,7 @@
     "title": "Quais são as vantagens e desvantagens de usar o Ajax?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.json
index 50d8ee8f7..db8bc807f 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.json
@@ -25,7 +25,7 @@
     "title": "使用Ajax的利弊是什么？",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-currying-and-partial-application/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-currying-and-partial-application/en-US.json
index bc2c26500..7b8b3613c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-currying-and-partial-application/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-benefits-of-using-currying-and-partial-application/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What are the benefits of using currying and partial application?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.json
index e0b7d19a3..5eb53d7e3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "What are the common pitfalls of using the `this` keyword?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.json
index 8c59335e6..e7fd33afd 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "What are the differences between JavaScript ES2015 classes and ES5 function constructors?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/pt-BR.json
index 9236576fa..e82ae3456 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/pt-BR.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Quais são as diferenças entre a classe ES2015 e os construtores de função ES5?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.json
index 234876ca7..748beea69 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "ES2015类和 ES5 函数构造函数之间有什么区别？",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.json
index a36464c38..d6126a4fa 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.json
@@ -25,7 +25,7 @@
     "title": "What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.json
index 5b6097945..eb73a777c 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.json
@@ -25,7 +25,7 @@
     "title": "What are the different ways to make an API call in JavaScript?",
     "topics": [
       "javascript",
-      "network"
+      "networking"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.json
index cbf5d3ad1..5e426c782 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.json
@@ -24,8 +24,8 @@
     "subtitle": null,
     "title": "What are the different ways to visually hide content (and make it available only for screen readers)?",
     "topics": [
-      "css",
-      "a11y"
+      "a11y",
+      "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.json
index d7b521712..9ea8b62bc 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.json
@@ -24,8 +24,8 @@
     "subtitle": null,
     "title": "Quais são as diferentes maneiras de esconder conteúdo visualmente (e torná-lo disponível apenas para leitores de tela)?",
     "topics": [
-      "css",
-      "a11y"
+      "a11y",
+      "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.json
index 6ea6b5198..6732b29fe 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.json
@@ -24,8 +24,8 @@
     "subtitle": null,
     "title": "有哪些不同的方法可以在视觉上隐藏内容（并使其仅对屏幕阅读器可用）？",
     "topics": [
-      "css",
-      "a11y"
+      "a11y",
+      "css"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-potential-pitfalls-of-using-closures/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-potential-pitfalls-of-using-closures/en-US.json
index 49199a20c..36c6a4fd7 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-potential-pitfalls-of-using-closures/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-potential-pitfalls-of-using-closures/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What are the potential pitfalls of using closures?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.json
index 17dfabb33..13a428398 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.json
@@ -26,6 +26,7 @@
     "subtitle": null,
     "title": "What are the pros and cons of using Promises instead of callbacks in JavaScript?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/pt-BR.json
index 23d9e8301..8bd23330d 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/pt-BR.json
@@ -26,6 +26,7 @@
     "subtitle": null,
     "title": "Quais são os prós e contras de usar Promises em vez de callbacks?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.json
index 1a6a5f52a..476615ee3 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.json
@@ -26,6 +26,7 @@
     "subtitle": null,
     "title": "使用Promise而不是回调的利弊是什么？",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/en-US.json b/apps/web/src/__generated__/questions/quiz/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/en-US.json
index ffd35276f..510f75601 100644
--- a/apps/web/src/__generated__/questions/quiz/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What are Web Workers and how can they be used to improve performance?",
     "topics": [
+      "web-api",
       "javascript",
       "performance"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/en-US.json
index bfb863e62..290c4f073 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/en-US.json
@@ -29,6 +29,7 @@
     "subtitle": null,
     "title": "What is a closure in JavaScript, and how/why would you use one?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/pt-BR.json b/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/pt-BR.json
index 0fc0e1881..7d0342e30 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/pt-BR.json
@@ -29,6 +29,7 @@
     "subtitle": null,
     "title": "O que é um closure e como/por que você usaria um?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-a-closure-and-how-why-would-you-use-one/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/zh-CN.json b/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/zh-CN.json
index 80a8dea5d..a475a0135 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one/zh-CN.json
@@ -29,6 +29,7 @@
     "subtitle": null,
     "title": "什么是闭包？ 你如何/为何使用？",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-a-closure-and-how-why-would-you-use-one/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.json
index 1dba1fe97..a606f278e 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What is async/await and how does it simplify asynchronous code?",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-currying-and-how-does-it-work/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-currying-and-how-does-it-work/en-US.json
index 74e250079..3676fa7bd 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-currying-and-how-does-it-work/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-currying-and-how-does-it-work/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What is currying and how does it work?",
     "topics": [
+      "closure",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-currying-and-how-does-it-work/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-recursion-and-how-is-it-used-in-javascript/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-recursion-and-how-is-it-used-in-javascript/en-US.json
index 4fc6f3282..8332d88a7 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-recursion-and-how-is-it-used-in-javascript/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-recursion-and-how-is-it-used-in-javascript/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "What is recursion and how is it used in JavaScript?",
     "topics": [
-      "javascript"
+      "javascript",
+      "recursion"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.json
index 8ca427fa5..496255958 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.json
@@ -24,8 +24,9 @@
     "subtitle": null,
     "title": "What is the difference between `event.preventDefault()` and `event.stopPropagation()`?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-innerhtml-and-textcontent/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-innerhtml-and-textcontent/en-US.json
index c08057057..bcc87d408 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-innerhtml-and-textcontent/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-innerhtml-and-textcontent/en-US.json
@@ -24,8 +24,9 @@
     "subtitle": null,
     "title": "What is the difference between `innerHTML` and `textContent`?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-innerhtml-and-textcontent/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.json
index 400929e5d..5f6f98301 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.json
@@ -24,8 +24,9 @@
     "subtitle": null,
     "title": "What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?",
     "topics": [
-      "javascript",
-      "html"
+      "web-api",
+      "html",
+      "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.json
index 31044daf8..9bff6fdb0 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What is the difference between `setTimeout()`, `setImmediate()`, and `process.nextTick()`?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.json
index 266c3b9ae..a5bf55135 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What is the difference between the Window object and the Document object?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-prototype-chain-and-how-does-it-work/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-prototype-chain-and-how-does-it-work/en-US.json
index 40ec29c6a..523ec3f7b 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-prototype-chain-and-how-does-it-work/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-prototype-chain-and-how-does-it-work/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "What is the prototype chain and how does it work?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-new-keyword/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-new-keyword/en-US.json
index f3fb7784f..2e44d9988 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-new-keyword/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-purpose-of-the-new-keyword/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "What is the purpose of the `new` keyword?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-purpose-of-the-new-keyword/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/what-is-the-use-of-promiseall/en-US.json b/apps/web/src/__generated__/questions/quiz/what-is-the-use-of-promiseall/en-US.json
index 3d22a5030..df2f9204f 100644
--- a/apps/web/src/__generated__/questions/quiz/what-is-the-use-of-promiseall/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/what-is-the-use-of-promiseall/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What is the use of `Promise.all()`",
     "topics": [
+      "async",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/what-is-the-use-of-promiseall/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/en-US.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/en-US.json
index 3a2079129..65e4ac50d 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What's the difference between an \"attribute\" and a \"property\" in the DOM?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/pt-BR.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/pt-BR.json
index 5dc2ca550..a537e891d 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/pt-BR.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Qual é a diferença entre um \"atributo\" e uma \"propriedade\"?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/zh-CN.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/zh-CN.json
index b29f6733a..e4faa41c6 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-an-attribute-and-a-property/zh-CN.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "\"attribute\" 和 \"property\" 之间有什么区别？",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.json
index 5c4569ba8..f9780a4f5 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "What's the difference between feature detection, feature inference, and using the UA string?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/pt-BR.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/pt-BR.json
index c1484a703..6f6550056 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/pt-BR.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Qual é a diferença entre detecção de recurso, inferência de recurso e uso da string UA?",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.json b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.json
index 36091b94a..5ad77ae20 100644
--- a/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "功能检测、功能推断和使用UA字符串之间有什么区别？",
     "topics": [
+      "browser",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/en-US.json b/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/en-US.json
index 38432cee9..668de377e 100644
--- a/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "When would you use `document.write()`?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/pt-BR.json b/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/pt-BR.json
index 776c9b215..016e2a46b 100644
--- a/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/pt-BR.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "Quando você usaria `document.write()`?",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/zh-CN.json b/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/zh-CN.json
index 62594fccb..f4d1c37ac 100644
--- a/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/when-would-you-use-document-write/zh-CN.json
@@ -24,6 +24,7 @@
     "subtitle": null,
     "title": "您什么时候使用 `document.write()`？",
     "topics": [
+      "web-api",
       "javascript",
       "html"
     ],
diff --git a/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.json b/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.json
index 0069ea6b9..b73a2bf0a 100644
--- a/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Why is extending built-in JavaScript objects not a good idea?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/pt-BR.json b/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/pt-BR.json
index e7c293600..9a03999ce 100644
--- a/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/pt-BR.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Por que estender objetos JavaScript nativos não é uma boa ideia?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.json b/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.json
index 47f210498..6edc1a9dd 100644
--- a/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "为什么扩展内置的 JavaScript 对象不是一个好主意？",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.json b/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.json
index 4b0e62786..c636fce0e 100644
--- a/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.json
@@ -24,6 +24,7 @@
     "subtitle": "Does this event have disadvantages? Do you know any alternatives, and why would you use those?",
     "title": "Why would you use something like the `load` event?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/pt-BR.json b/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/pt-BR.json
index 36d6ac1a0..5fa71f44f 100644
--- a/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/pt-BR.json
@@ -24,6 +24,7 @@
     "subtitle": "Este evento tem desvantagens? Você conhece alguma alternativa, e por que as usaria?",
     "title": "Por que você usaria algo como o evento `load`?",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/pt-BR.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.json b/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.json
index 7a0ccd39d..bb635907e 100644
--- a/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.json
@@ -24,6 +24,7 @@
     "subtitle": "此事件是否有缺点？ 您是否知道任何替代方法，以及为什么要使用这些方法？",
     "title": "你为什么要使用 `load` 事件？",
     "topics": [
+      "web-api",
       "javascript"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.mdx"
diff --git a/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/en-US.json b/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/en-US.json
index 249bff762..6892e6e84 100644
--- a/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/en-US.json
+++ b/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/en-US.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Why might you want to create static class members in JavaScript?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-you-might-want-to-create-static-class-members/en-US.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/pt-BR.json b/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/pt-BR.json
index e9d9791a3..82bc3abe3 100644
--- a/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/pt-BR.json
+++ b/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/pt-BR.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "Por que você pode querer criar membros de classe estáticos?",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-you-might-want-to-create-static-class-members/pt-BR.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/zh-CN.json b/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/zh-CN.json
index c4ca046a9..24886fe7b 100644
--- a/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/zh-CN.json
+++ b/apps/web/src/__generated__/questions/quiz/why-you-might-want-to-create-static-class-members/zh-CN.json
@@ -24,7 +24,8 @@
     "subtitle": null,
     "title": "为什么你想要创建静态类成员？",
     "topics": [
-      "javascript"
+      "javascript",
+      "oop"
     ],
     "gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/why-you-might-want-to-create-static-class-members/zh-CN.mdx"
   },
diff --git a/apps/web/src/__generated__/questions/user-interface/UserInterfaceQuestionsList.json b/apps/web/src/__generated__/questions/user-interface/UserInterfaceQuestionsList.json
index c61722300..c1a7cd293 100644
--- a/apps/web/src/__generated__/questions/user-interface/UserInterfaceQuestionsList.json
+++ b/apps/web/src/__generated__/questions/user-interface/UserInterfaceQuestionsList.json
@@ -1,6 +1,6 @@
 [
   {
-    "access": "free",
+    "access": "premium",
     "author": "yangshun",
     "companies": [],
     "created": 1671580800,
@@ -36,7 +36,9 @@
     "slug": "accordion",
     "subtitle": null,
     "title": "Accordion",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -74,7 +76,9 @@
     "slug": "accordion-ii",
     "subtitle": null,
     "title": "Accordion II",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -106,7 +110,9 @@
     "slug": "accordion-iii",
     "subtitle": null,
     "title": "Accordion III",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -159,7 +165,10 @@
     "slug": "analog-clock",
     "subtitle": null,
     "title": "Analog Clock",
-    "topics": []
+    "topics": [
+      "a11y",
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -192,7 +201,9 @@
     "slug": "auth-code-input",
     "subtitle": null,
     "title": "Auth Code Input",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -336,7 +347,9 @@
     "slug": "contact-form",
     "subtitle": null,
     "title": "Contact Form",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "free",
@@ -576,7 +589,9 @@
     "slug": "dice-roller",
     "subtitle": null,
     "title": "Dice Roller",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "free",
@@ -627,7 +642,10 @@
     "slug": "digital-clock",
     "subtitle": null,
     "title": "Digital Clock",
-    "topics": []
+    "topics": [
+      "a11y",
+      "async"
+    ]
   },
   {
     "access": "free",
@@ -669,7 +687,9 @@
     "slug": "file-explorer",
     "subtitle": null,
     "title": "File Explorer",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -739,7 +759,7 @@
       "js"
     ],
     "nextQuestions": [
-      "file-explorer-iii"
+      "nested-checkboxes"
     ],
     "published": true,
     "ranking": 100,
@@ -765,6 +785,10 @@
         "framework": "react",
         "href": "/questions/user-interface/flight-booker/react"
       },
+      {
+        "framework": "vanilla",
+        "href": "/questions/user-interface/flight-booker/vanilla"
+      },
       {
         "framework": "angular",
         "href": "/questions/user-interface/flight-booker/angular"
@@ -791,7 +815,9 @@
     "slug": "flight-booker",
     "subtitle": null,
     "title": "Flight Booker",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -888,7 +914,10 @@
     "slug": "grid-lights",
     "subtitle": null,
     "title": "Grid Lights",
-    "topics": []
+    "topics": [
+      "a11y",
+      "async"
+    ]
   },
   {
     "access": "free",
@@ -986,7 +1015,9 @@
     "slug": "image-carousel",
     "subtitle": null,
     "title": "Image Carousel",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -1029,7 +1060,9 @@
     "slug": "image-carousel-ii",
     "subtitle": null,
     "title": "Image Carousel II",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -1122,7 +1155,9 @@
     "slug": "job-board",
     "subtitle": null,
     "title": "Job Board",
-    "topics": []
+    "topics": [
+      "networking"
+    ]
   },
   {
     "access": "premium",
@@ -1169,7 +1204,10 @@
     "slug": "like-button",
     "subtitle": null,
     "title": "Like Button",
-    "topics": []
+    "topics": [
+      "async",
+      "networking"
+    ]
   },
   {
     "access": "premium",
@@ -1251,7 +1289,9 @@
     "slug": "modal-dialog",
     "subtitle": null,
     "title": "Modal Dialog",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -1288,7 +1328,9 @@
     "slug": "modal-dialog-ii",
     "subtitle": null,
     "title": "Modal Dialog II",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -1324,7 +1366,9 @@
     "slug": "modal-dialog-iii",
     "subtitle": null,
     "title": "Modal Dialog III",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -1358,7 +1402,9 @@
     "slug": "modal-dialog-iv",
     "subtitle": null,
     "title": "Modal Dialog IV",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "free",
@@ -1487,7 +1533,9 @@
     "slug": "pixel-art",
     "subtitle": null,
     "title": "Pixel Art",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -1569,7 +1617,9 @@
     "slug": "progress-bars",
     "subtitle": null,
     "title": "Progress Bars",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -1606,7 +1656,9 @@
     "slug": "progress-bars-ii",
     "subtitle": null,
     "title": "Progress Bars II",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -1643,7 +1695,9 @@
     "slug": "progress-bars-iii",
     "subtitle": null,
     "title": "Progress Bars III",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -1678,7 +1732,9 @@
     "slug": "progress-bars-iv",
     "subtitle": null,
     "title": "Progress Bars IV",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
@@ -1853,7 +1909,9 @@
     "slug": "stopwatch",
     "subtitle": null,
     "title": "Stopwatch",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "free",
@@ -1903,7 +1961,9 @@
     "slug": "tabs",
     "subtitle": null,
     "title": "Tabs",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -1953,7 +2013,9 @@
     "slug": "tabs-ii",
     "subtitle": null,
     "title": "Tabs II",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -1996,7 +2058,9 @@
     "slug": "tabs-iii",
     "subtitle": null,
     "title": "Tabs III",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -2098,7 +2162,9 @@
     "slug": "tic-tac-toe",
     "subtitle": null,
     "title": "Tic-tac-toe",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "premium",
@@ -2148,7 +2214,9 @@
     "slug": "tic-tac-toe-ii",
     "subtitle": null,
     "title": "Tic-tac-toe II",
-    "topics": []
+    "topics": [
+      "a11y"
+    ]
   },
   {
     "access": "free",
@@ -2258,7 +2326,9 @@
     "slug": "traffic-light",
     "subtitle": null,
     "title": "Traffic Light",
-    "topics": []
+    "topics": [
+      "async"
+    ]
   },
   {
     "access": "premium",
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-ii/angular/skeleton.json b/apps/web/src/__generated__/questions/user-interface/accordion-ii/angular/skeleton.json
index 309add419..5e19a7ef8 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-ii/angular/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-ii/angular/skeleton.json
@@ -56,5 +56,5 @@
     "activeFile": "/src/app/app.component.ts",
     "environment": "angular-cli"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!A.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var d=(t,e,o)=>(o=t!=null?m(w(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>l(r({},\"__esModule\",{value:!0}),t);var c=x((k,h)=>{h.exports=_jsx_runtime});var _={};v(_,{default:()=>q});var a=d(c());var n=d(c());function u(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",blockquote:\"blockquote\",em:\"em\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"Accordion Pattern\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", we built a functional accordion component that can expand/collapse each section's contents. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ARIA Authoring Practices Guide has a \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"long list of guidelines for the ARIA roles, states, and properties to add to the various elements of an accordion\"}),\". We should implement the following (improvised) guidelines for this question:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The title of each accordion header is contained in a \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If the accordion panel associated with an accordion header is visible, the header button element has \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" set to \",(0,n.jsx)(e.code,{children:\"true\"}),\". If the panel is not visible, \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The accordion header button element has \",(0,n.jsx)(e.code,{children:\"aria-controls\"}),\" set to the ID of the element containing the accordion panel content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each element that serves as a container for panel content has role \",(0,n.jsx)(e.code,{children:\"region\"}),\" and \",(0,n.jsx)(e.code,{children:\"aria-labelledby\"}),\" with a value that refers to the button that controls display of the panel.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=I;function f(t){return(0,a.jsx)(p,{})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var q=j;return y(_);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!A.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var d=(t,e,o)=>(o=t!=null?m(w(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),v=t=>l(r({},\"__esModule\",{value:!0}),t);var c=x((k,h)=>{h.exports=_jsx_runtime});var _={};y(_,{default:()=>q});var a=d(c());var n=d(c());function u(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",blockquote:\"blockquote\",em:\"em\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"Accordion Pattern\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", we built a functional accordion component that can expand/collapse each section's contents. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ARIA Authoring Practices Guide has a \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"long list of guidelines for the ARIA roles, states, and properties to add to the various elements of an accordion\"}),\". We should implement the following (improvised) guidelines for this question:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The title of each accordion header is contained in a \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If the accordion panel associated with an accordion header is visible, the header button element has \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" set to \",(0,n.jsx)(e.code,{children:\"true\"}),\". If the panel is not visible, \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The accordion header button element has \",(0,n.jsx)(e.code,{children:\"aria-controls\"}),\" set to the ID of the element containing the accordion panel content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each element that serves as a container for panel content has role \",(0,n.jsx)(e.code,{children:\"region\"}),\" and \",(0,n.jsx)(e.code,{children:\"aria-labelledby\"}),\" with a value that refers to the button that controls display of the panel.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=I;function f(t){return(0,a.jsx)(p,{})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var q=j;return v(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-ii/metadata.json b/apps/web/src/__generated__/questions/user-interface/accordion-ii/metadata.json
index 365e25213..5e55930f2 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-ii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-ii/metadata.json
@@ -34,5 +34,7 @@
   "slug": "accordion-ii",
   "subtitle": null,
   "title": "Accordion II",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-ii/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/accordion-ii/react/skeleton.json
index 89daaf081..fb300fd58 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-ii/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-ii/react/skeleton.json
@@ -29,5 +29,5 @@
     "activeFile": "/src/Accordion.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!A.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var d=(t,e,o)=>(o=t!=null?m(w(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>l(r({},\"__esModule\",{value:!0}),t);var c=x((k,h)=>{h.exports=_jsx_runtime});var _={};v(_,{default:()=>q});var a=d(c());var n=d(c());function u(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",blockquote:\"blockquote\",em:\"em\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"Accordion Pattern\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", we built a functional accordion component that can expand/collapse each section's contents. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ARIA Authoring Practices Guide has a \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"long list of guidelines for the ARIA roles, states, and properties to add to the various elements of an accordion\"}),\". We should implement the following (improvised) guidelines for this question:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The title of each accordion header is contained in a \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If the accordion panel associated with an accordion header is visible, the header button element has \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" set to \",(0,n.jsx)(e.code,{children:\"true\"}),\". If the panel is not visible, \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The accordion header button element has \",(0,n.jsx)(e.code,{children:\"aria-controls\"}),\" set to the ID of the element containing the accordion panel content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each element that serves as a container for panel content has role \",(0,n.jsx)(e.code,{children:\"region\"}),\" and \",(0,n.jsx)(e.code,{children:\"aria-labelledby\"}),\" with a value that refers to the button that controls display of the panel.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=I;function f(t){return(0,a.jsx)(p,{})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var q=j;return y(_);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!A.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var d=(t,e,o)=>(o=t!=null?m(w(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),v=t=>l(r({},\"__esModule\",{value:!0}),t);var c=x((k,h)=>{h.exports=_jsx_runtime});var _={};y(_,{default:()=>q});var a=d(c());var n=d(c());function u(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",blockquote:\"blockquote\",em:\"em\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"Accordion Pattern\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", we built a functional accordion component that can expand/collapse each section's contents. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ARIA Authoring Practices Guide has a \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"long list of guidelines for the ARIA roles, states, and properties to add to the various elements of an accordion\"}),\". We should implement the following (improvised) guidelines for this question:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The title of each accordion header is contained in a \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If the accordion panel associated with an accordion header is visible, the header button element has \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" set to \",(0,n.jsx)(e.code,{children:\"true\"}),\". If the panel is not visible, \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The accordion header button element has \",(0,n.jsx)(e.code,{children:\"aria-controls\"}),\" set to the ID of the element containing the accordion panel content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each element that serves as a container for panel content has role \",(0,n.jsx)(e.code,{children:\"region\"}),\" and \",(0,n.jsx)(e.code,{children:\"aria-labelledby\"}),\" with a value that refers to the button that controls display of the panel.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=I;function f(t){return(0,a.jsx)(p,{})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var q=j;return v(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-ii/svelte/skeleton.json b/apps/web/src/__generated__/questions/user-interface/accordion-ii/svelte/skeleton.json
index b570ef3cb..4e8401c9d 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-ii/svelte/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-ii/svelte/skeleton.json
@@ -29,5 +29,5 @@
     "activeFile": "/src/Accordion.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!A.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var d=(t,e,o)=>(o=t!=null?m(w(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>l(r({},\"__esModule\",{value:!0}),t);var c=x((k,h)=>{h.exports=_jsx_runtime});var _={};v(_,{default:()=>q});var a=d(c());var n=d(c());function u(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",blockquote:\"blockquote\",em:\"em\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"Accordion Pattern\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", we built a functional accordion component that can expand/collapse each section's contents. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ARIA Authoring Practices Guide has a \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"long list of guidelines for the ARIA roles, states, and properties to add to the various elements of an accordion\"}),\". We should implement the following (improvised) guidelines for this question:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The title of each accordion header is contained in a \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If the accordion panel associated with an accordion header is visible, the header button element has \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" set to \",(0,n.jsx)(e.code,{children:\"true\"}),\". If the panel is not visible, \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The accordion header button element has \",(0,n.jsx)(e.code,{children:\"aria-controls\"}),\" set to the ID of the element containing the accordion panel content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each element that serves as a container for panel content has role \",(0,n.jsx)(e.code,{children:\"region\"}),\" and \",(0,n.jsx)(e.code,{children:\"aria-labelledby\"}),\" with a value that refers to the button that controls display of the panel.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=I;function f(t){return(0,a.jsx)(p,{})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var q=j;return y(_);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!A.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var d=(t,e,o)=>(o=t!=null?m(w(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),v=t=>l(r({},\"__esModule\",{value:!0}),t);var c=x((k,h)=>{h.exports=_jsx_runtime});var _={};y(_,{default:()=>q});var a=d(c());var n=d(c());function u(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",blockquote:\"blockquote\",em:\"em\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"Accordion Pattern\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", we built a functional accordion component that can expand/collapse each section's contents. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ARIA Authoring Practices Guide has a \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"long list of guidelines for the ARIA roles, states, and properties to add to the various elements of an accordion\"}),\". We should implement the following (improvised) guidelines for this question:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The title of each accordion header is contained in a \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If the accordion panel associated with an accordion header is visible, the header button element has \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" set to \",(0,n.jsx)(e.code,{children:\"true\"}),\". If the panel is not visible, \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The accordion header button element has \",(0,n.jsx)(e.code,{children:\"aria-controls\"}),\" set to the ID of the element containing the accordion panel content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each element that serves as a container for panel content has role \",(0,n.jsx)(e.code,{children:\"region\"}),\" and \",(0,n.jsx)(e.code,{children:\"aria-labelledby\"}),\" with a value that refers to the button that controls display of the panel.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=I;function f(t){return(0,a.jsx)(p,{})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var q=j;return v(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-ii/vanilla/skeleton.json b/apps/web/src/__generated__/questions/user-interface/accordion-ii/vanilla/skeleton.json
index 2ea9a7b92..d7d716a52 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-ii/vanilla/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-ii/vanilla/skeleton.json
@@ -23,5 +23,5 @@
     "activeFile": "/src/index.html",
     "environment": "parcel"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!A.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var d=(t,e,o)=>(o=t!=null?m(w(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>l(r({},\"__esModule\",{value:!0}),t);var c=x((k,h)=>{h.exports=_jsx_runtime});var _={};v(_,{default:()=>q});var a=d(c());var n=d(c());function u(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",blockquote:\"blockquote\",em:\"em\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"Accordion Pattern\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", we built a functional accordion component that can expand/collapse each section's contents. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ARIA Authoring Practices Guide has a \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"long list of guidelines for the ARIA roles, states, and properties to add to the various elements of an accordion\"}),\". We should implement the following (improvised) guidelines for this question:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The title of each accordion header is contained in a \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If the accordion panel associated with an accordion header is visible, the header button element has \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" set to \",(0,n.jsx)(e.code,{children:\"true\"}),\". If the panel is not visible, \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The accordion header button element has \",(0,n.jsx)(e.code,{children:\"aria-controls\"}),\" set to the ID of the element containing the accordion panel content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each element that serves as a container for panel content has role \",(0,n.jsx)(e.code,{children:\"region\"}),\" and \",(0,n.jsx)(e.code,{children:\"aria-labelledby\"}),\" with a value that refers to the button that controls display of the panel.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=I;function f(t){return(0,a.jsx)(p,{})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var q=j;return y(_);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!A.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var d=(t,e,o)=>(o=t!=null?m(w(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),v=t=>l(r({},\"__esModule\",{value:!0}),t);var c=x((k,h)=>{h.exports=_jsx_runtime});var _={};y(_,{default:()=>q});var a=d(c());var n=d(c());function u(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",blockquote:\"blockquote\",em:\"em\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"Accordion Pattern\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", we built a functional accordion component that can expand/collapse each section's contents. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ARIA Authoring Practices Guide has a \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"long list of guidelines for the ARIA roles, states, and properties to add to the various elements of an accordion\"}),\". We should implement the following (improvised) guidelines for this question:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The title of each accordion header is contained in a \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If the accordion panel associated with an accordion header is visible, the header button element has \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" set to \",(0,n.jsx)(e.code,{children:\"true\"}),\". If the panel is not visible, \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The accordion header button element has \",(0,n.jsx)(e.code,{children:\"aria-controls\"}),\" set to the ID of the element containing the accordion panel content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each element that serves as a container for panel content has role \",(0,n.jsx)(e.code,{children:\"region\"}),\" and \",(0,n.jsx)(e.code,{children:\"aria-labelledby\"}),\" with a value that refers to the button that controls display of the panel.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=I;function f(t){return(0,a.jsx)(p,{})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var q=j;return v(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-ii/vue/skeleton.json b/apps/web/src/__generated__/questions/user-interface/accordion-ii/vue/skeleton.json
index 872763067..53896b36d 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-ii/vue/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-ii/vue/skeleton.json
@@ -28,5 +28,5 @@
     "activeFile": "/src/App.vue",
     "environment": "vue-cli"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!A.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var d=(t,e,o)=>(o=t!=null?m(w(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>l(r({},\"__esModule\",{value:!0}),t);var c=x((k,h)=>{h.exports=_jsx_runtime});var _={};v(_,{default:()=>q});var a=d(c());var n=d(c());function u(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",blockquote:\"blockquote\",em:\"em\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"Accordion Pattern\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", we built a functional accordion component that can expand/collapse each section's contents. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ARIA Authoring Practices Guide has a \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"long list of guidelines for the ARIA roles, states, and properties to add to the various elements of an accordion\"}),\". We should implement the following (improvised) guidelines for this question:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The title of each accordion header is contained in a \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If the accordion panel associated with an accordion header is visible, the header button element has \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" set to \",(0,n.jsx)(e.code,{children:\"true\"}),\". If the panel is not visible, \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The accordion header button element has \",(0,n.jsx)(e.code,{children:\"aria-controls\"}),\" set to the ID of the element containing the accordion panel content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each element that serves as a container for panel content has role \",(0,n.jsx)(e.code,{children:\"region\"}),\" and \",(0,n.jsx)(e.code,{children:\"aria-labelledby\"}),\" with a value that refers to the button that controls display of the panel.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=I;function f(t){return(0,a.jsx)(p,{})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var q=j;return y(_);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!A.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=g(e,i))||s.enumerable});return t};var d=(t,e,o)=>(o=t!=null?m(w(t)):{},l(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),v=t=>l(r({},\"__esModule\",{value:!0}),t);var c=x((k,h)=>{h.exports=_jsx_runtime});var _={};y(_,{default:()=>q});var a=d(c());var n=d(c());function u(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",blockquote:\"blockquote\",em:\"em\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:\"An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"Accordion Pattern\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", we built a functional accordion component that can expand/collapse each section's contents. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The ARIA Authoring Practices Guide has a \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"long list of guidelines for the ARIA roles, states, and properties to add to the various elements of an accordion\"}),\". We should implement the following (improvised) guidelines for this question:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The title of each accordion header is contained in a \",(0,n.jsx)(e.code,{children:\"<button>\"}),\" element.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"If the accordion panel associated with an accordion header is visible, the header button element has \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" set to \",(0,n.jsx)(e.code,{children:\"true\"}),\". If the panel is not visible, \",(0,n.jsx)(e.code,{children:\"aria-expanded\"}),\" is set to \",(0,n.jsx)(e.code,{children:\"false\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The accordion header button element has \",(0,n.jsx)(e.code,{children:\"aria-controls\"}),\" set to the ID of the element containing the accordion panel content.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each element that serves as a container for panel content has role \",(0,n.jsx)(e.code,{children:\"region\"}),\" and \",(0,n.jsx)(e.code,{children:\"aria-labelledby\"}),\" with a value that refers to the button that controls display of the panel.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion\",children:\"Accordion\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=I;function f(t){return(0,a.jsx)(p,{})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var q=j;return v(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-iii/angular/skeleton.json b/apps/web/src/__generated__/questions/user-interface/accordion-iii/angular/skeleton.json
index 2caf3873e..c652ecaf6 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-iii/angular/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-iii/angular/skeleton.json
@@ -56,5 +56,5 @@
     "activeFile": "/src/app/app.component.ts",
     "environment": "angular-cli"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},d=(o,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!I.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return o};var l=(o,e,i)=>(i=o!=null?m(w(o)):{},d(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),k=o=>d(r({},\"__esModule\",{value:!0}),o);var a=x((M,h)=>{h.exports=_jsx_runtime});var q={};y(q,{default:()=>j});var c=l(a());var n=l(a());function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", you should complete that question first before attempting this question. This question is not available in Vanilla JavaScript as it will require a fair bit of code to add keyboard interactions without a JavaScript framework.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", we built a functional accordion component that has the necessary \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"WAI-ARIA roles, states, and properties\"}),\", which is actually pretty accessible. However, we can go one step further and add some optional keyboard interactions.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We'll be following a modified subset of the \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"necessary keyboard interactions for accordions\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(\"kbd\",{children:\"Enter\"}),\" or \",(0,n.jsx)(\"kbd\",{children:\"Space\"}),\" is hit and focus is on the accordion header\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"For a collapsed panel, expands the associated panel.\"}),`\n`,(0,n.jsx)(e.li,{children:\"For an expanded panel, collapses the associated panel.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the next focusable element;\nall focusable elements in the accordion are included in\nthe page `,(0,n.jsx)(\"kbd\",{children:\"Tab\"}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Shift\"}),\" + \",(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the\nprevious focusable element; all focusable elements in the\naccordion are included in the page `,(0,n.jsx)(\"kbd\",{children:`\nTab\n`}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Down Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the next accordion header. If focus is on\nthe last accordion header, either does nothing or moves\nfocus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Up Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the previous accordion header. If focus is\non the first accordion header, either does nothing or\nmoves focus to the last accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Home\"}),`: When focus is on an accordion header,\nmoves focus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"End\"}),`: When focus is on an accordion header,\nmoves focus to the last accordion header.`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The focus of this question is on adding keyboard functionality, not the styling. We have provided the solution to \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\" here for you to build on top of. You can reuse the existing styling.\"]}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(u,o)})):u(o)}var f=v;function p(o){return(0,c.jsx)(f,{})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,c.jsx)(e,Object.assign({},o,{children:(0,c.jsx)(p,o)})):p(o)}var j=A;return k(q);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},d=(o,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!I.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return o};var l=(o,e,i)=>(i=o!=null?m(w(o)):{},d(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),k=o=>d(r({},\"__esModule\",{value:!0}),o);var a=y((M,h)=>{h.exports=_jsx_runtime});var q={};x(q,{default:()=>j});var c=l(a());var n=l(a());function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", you should complete that question first before attempting this question. This question is not available in Vanilla JavaScript as it will require a fair bit of code to add keyboard interactions without a JavaScript framework.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", we built a functional accordion component that has the necessary \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"WAI-ARIA roles, states, and properties\"}),\", which is actually pretty accessible. However, we can go one step further and add some optional keyboard interactions.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We'll be following a modified subset of the \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"necessary keyboard interactions for accordions\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(\"kbd\",{children:\"Enter\"}),\" or \",(0,n.jsx)(\"kbd\",{children:\"Space\"}),\" is hit and focus is on the accordion header\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"For a collapsed panel, expands the associated panel.\"}),`\n`,(0,n.jsx)(e.li,{children:\"For an expanded panel, collapses the associated panel.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the next focusable element;\nall focusable elements in the accordion are included in\nthe page `,(0,n.jsx)(\"kbd\",{children:\"Tab\"}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Shift\"}),\" + \",(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the\nprevious focusable element; all focusable elements in the\naccordion are included in the page `,(0,n.jsx)(\"kbd\",{children:`\nTab\n`}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Down Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the next accordion header. If focus is on\nthe last accordion header, either does nothing or moves\nfocus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Up Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the previous accordion header. If focus is\non the first accordion header, either does nothing or\nmoves focus to the last accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Home\"}),`: When focus is on an accordion header,\nmoves focus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"End\"}),`: When focus is on an accordion header,\nmoves focus to the last accordion header.`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The focus of this question is on adding keyboard functionality, not the styling. We have provided the solution to \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\" here for you to build on top of. You can reuse the existing styling.\"]}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(u,o)})):u(o)}var f=v;function p(o){return(0,c.jsx)(f,{})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,c.jsx)(e,Object.assign({},o,{children:(0,c.jsx)(p,o)})):p(o)}var j=A;return k(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-iii/metadata.json b/apps/web/src/__generated__/questions/user-interface/accordion-iii/metadata.json
index 6a374dbc4..3ba08de98 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-iii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-iii/metadata.json
@@ -28,5 +28,7 @@
   "slug": "accordion-iii",
   "subtitle": null,
   "title": "Accordion III",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-iii/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/accordion-iii/react/skeleton.json
index 4c5002a37..0ad7bcb53 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-iii/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-iii/react/skeleton.json
@@ -29,5 +29,5 @@
     "activeFile": "/src/Accordion.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},d=(o,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!I.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return o};var l=(o,e,i)=>(i=o!=null?m(w(o)):{},d(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),k=o=>d(r({},\"__esModule\",{value:!0}),o);var a=x((M,h)=>{h.exports=_jsx_runtime});var q={};y(q,{default:()=>j});var c=l(a());var n=l(a());function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", you should complete that question first before attempting this question. This question is not available in Vanilla JavaScript as it will require a fair bit of code to add keyboard interactions without a JavaScript framework.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", we built a functional accordion component that has the necessary \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"WAI-ARIA roles, states, and properties\"}),\", which is actually pretty accessible. However, we can go one step further and add some optional keyboard interactions.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We'll be following a modified subset of the \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"necessary keyboard interactions for accordions\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(\"kbd\",{children:\"Enter\"}),\" or \",(0,n.jsx)(\"kbd\",{children:\"Space\"}),\" is hit and focus is on the accordion header\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"For a collapsed panel, expands the associated panel.\"}),`\n`,(0,n.jsx)(e.li,{children:\"For an expanded panel, collapses the associated panel.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the next focusable element;\nall focusable elements in the accordion are included in\nthe page `,(0,n.jsx)(\"kbd\",{children:\"Tab\"}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Shift\"}),\" + \",(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the\nprevious focusable element; all focusable elements in the\naccordion are included in the page `,(0,n.jsx)(\"kbd\",{children:`\nTab\n`}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Down Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the next accordion header. If focus is on\nthe last accordion header, either does nothing or moves\nfocus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Up Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the previous accordion header. If focus is\non the first accordion header, either does nothing or\nmoves focus to the last accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Home\"}),`: When focus is on an accordion header,\nmoves focus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"End\"}),`: When focus is on an accordion header,\nmoves focus to the last accordion header.`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The focus of this question is on adding keyboard functionality, not the styling. We have provided the solution to \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\" here for you to build on top of. You can reuse the existing styling.\"]}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(u,o)})):u(o)}var f=v;function p(o){return(0,c.jsx)(f,{})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,c.jsx)(e,Object.assign({},o,{children:(0,c.jsx)(p,o)})):p(o)}var j=A;return k(q);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},d=(o,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!I.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return o};var l=(o,e,i)=>(i=o!=null?m(w(o)):{},d(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),k=o=>d(r({},\"__esModule\",{value:!0}),o);var a=y((M,h)=>{h.exports=_jsx_runtime});var q={};x(q,{default:()=>j});var c=l(a());var n=l(a());function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", you should complete that question first before attempting this question. This question is not available in Vanilla JavaScript as it will require a fair bit of code to add keyboard interactions without a JavaScript framework.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", we built a functional accordion component that has the necessary \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"WAI-ARIA roles, states, and properties\"}),\", which is actually pretty accessible. However, we can go one step further and add some optional keyboard interactions.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We'll be following a modified subset of the \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"necessary keyboard interactions for accordions\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(\"kbd\",{children:\"Enter\"}),\" or \",(0,n.jsx)(\"kbd\",{children:\"Space\"}),\" is hit and focus is on the accordion header\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"For a collapsed panel, expands the associated panel.\"}),`\n`,(0,n.jsx)(e.li,{children:\"For an expanded panel, collapses the associated panel.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the next focusable element;\nall focusable elements in the accordion are included in\nthe page `,(0,n.jsx)(\"kbd\",{children:\"Tab\"}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Shift\"}),\" + \",(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the\nprevious focusable element; all focusable elements in the\naccordion are included in the page `,(0,n.jsx)(\"kbd\",{children:`\nTab\n`}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Down Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the next accordion header. If focus is on\nthe last accordion header, either does nothing or moves\nfocus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Up Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the previous accordion header. If focus is\non the first accordion header, either does nothing or\nmoves focus to the last accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Home\"}),`: When focus is on an accordion header,\nmoves focus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"End\"}),`: When focus is on an accordion header,\nmoves focus to the last accordion header.`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The focus of this question is on adding keyboard functionality, not the styling. We have provided the solution to \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\" here for you to build on top of. You can reuse the existing styling.\"]}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(u,o)})):u(o)}var f=v;function p(o){return(0,c.jsx)(f,{})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,c.jsx)(e,Object.assign({},o,{children:(0,c.jsx)(p,o)})):p(o)}var j=A;return k(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-iii/svelte/skeleton.json b/apps/web/src/__generated__/questions/user-interface/accordion-iii/svelte/skeleton.json
index d95a3c3a1..a7369bc30 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-iii/svelte/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-iii/svelte/skeleton.json
@@ -29,5 +29,5 @@
     "activeFile": "/src/Accordion.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},d=(o,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!I.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return o};var l=(o,e,i)=>(i=o!=null?m(w(o)):{},d(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),k=o=>d(r({},\"__esModule\",{value:!0}),o);var a=x((M,h)=>{h.exports=_jsx_runtime});var q={};y(q,{default:()=>j});var c=l(a());var n=l(a());function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", you should complete that question first before attempting this question. This question is not available in Vanilla JavaScript as it will require a fair bit of code to add keyboard interactions without a JavaScript framework.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", we built a functional accordion component that has the necessary \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"WAI-ARIA roles, states, and properties\"}),\", which is actually pretty accessible. However, we can go one step further and add some optional keyboard interactions.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We'll be following a modified subset of the \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"necessary keyboard interactions for accordions\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(\"kbd\",{children:\"Enter\"}),\" or \",(0,n.jsx)(\"kbd\",{children:\"Space\"}),\" is hit and focus is on the accordion header\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"For a collapsed panel, expands the associated panel.\"}),`\n`,(0,n.jsx)(e.li,{children:\"For an expanded panel, collapses the associated panel.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the next focusable element;\nall focusable elements in the accordion are included in\nthe page `,(0,n.jsx)(\"kbd\",{children:\"Tab\"}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Shift\"}),\" + \",(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the\nprevious focusable element; all focusable elements in the\naccordion are included in the page `,(0,n.jsx)(\"kbd\",{children:`\nTab\n`}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Down Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the next accordion header. If focus is on\nthe last accordion header, either does nothing or moves\nfocus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Up Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the previous accordion header. If focus is\non the first accordion header, either does nothing or\nmoves focus to the last accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Home\"}),`: When focus is on an accordion header,\nmoves focus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"End\"}),`: When focus is on an accordion header,\nmoves focus to the last accordion header.`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The focus of this question is on adding keyboard functionality, not the styling. We have provided the solution to \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\" here for you to build on top of. You can reuse the existing styling.\"]}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(u,o)})):u(o)}var f=v;function p(o){return(0,c.jsx)(f,{})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,c.jsx)(e,Object.assign({},o,{children:(0,c.jsx)(p,o)})):p(o)}var j=A;return k(q);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},d=(o,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!I.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return o};var l=(o,e,i)=>(i=o!=null?m(w(o)):{},d(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),k=o=>d(r({},\"__esModule\",{value:!0}),o);var a=y((M,h)=>{h.exports=_jsx_runtime});var q={};x(q,{default:()=>j});var c=l(a());var n=l(a());function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", you should complete that question first before attempting this question. This question is not available in Vanilla JavaScript as it will require a fair bit of code to add keyboard interactions without a JavaScript framework.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", we built a functional accordion component that has the necessary \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"WAI-ARIA roles, states, and properties\"}),\", which is actually pretty accessible. However, we can go one step further and add some optional keyboard interactions.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We'll be following a modified subset of the \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"necessary keyboard interactions for accordions\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(\"kbd\",{children:\"Enter\"}),\" or \",(0,n.jsx)(\"kbd\",{children:\"Space\"}),\" is hit and focus is on the accordion header\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"For a collapsed panel, expands the associated panel.\"}),`\n`,(0,n.jsx)(e.li,{children:\"For an expanded panel, collapses the associated panel.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the next focusable element;\nall focusable elements in the accordion are included in\nthe page `,(0,n.jsx)(\"kbd\",{children:\"Tab\"}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Shift\"}),\" + \",(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the\nprevious focusable element; all focusable elements in the\naccordion are included in the page `,(0,n.jsx)(\"kbd\",{children:`\nTab\n`}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Down Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the next accordion header. If focus is on\nthe last accordion header, either does nothing or moves\nfocus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Up Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the previous accordion header. If focus is\non the first accordion header, either does nothing or\nmoves focus to the last accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Home\"}),`: When focus is on an accordion header,\nmoves focus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"End\"}),`: When focus is on an accordion header,\nmoves focus to the last accordion header.`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The focus of this question is on adding keyboard functionality, not the styling. We have provided the solution to \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\" here for you to build on top of. You can reuse the existing styling.\"]}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(u,o)})):u(o)}var f=v;function p(o){return(0,c.jsx)(f,{})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,c.jsx)(e,Object.assign({},o,{children:(0,c.jsx)(p,o)})):p(o)}var j=A;return k(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion-iii/vue/skeleton.json b/apps/web/src/__generated__/questions/user-interface/accordion-iii/vue/skeleton.json
index e0a04f655..d0554dd24 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion-iii/vue/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion-iii/vue/skeleton.json
@@ -28,5 +28,5 @@
     "activeFile": "/src/App.vue",
     "environment": "vue-cli"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},d=(o,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!I.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return o};var l=(o,e,i)=>(i=o!=null?m(w(o)):{},d(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),k=o=>d(r({},\"__esModule\",{value:!0}),o);var a=x((M,h)=>{h.exports=_jsx_runtime});var q={};y(q,{default:()=>j});var c=l(a());var n=l(a());function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", you should complete that question first before attempting this question. This question is not available in Vanilla JavaScript as it will require a fair bit of code to add keyboard interactions without a JavaScript framework.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", we built a functional accordion component that has the necessary \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"WAI-ARIA roles, states, and properties\"}),\", which is actually pretty accessible. However, we can go one step further and add some optional keyboard interactions.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We'll be following a modified subset of the \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"necessary keyboard interactions for accordions\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(\"kbd\",{children:\"Enter\"}),\" or \",(0,n.jsx)(\"kbd\",{children:\"Space\"}),\" is hit and focus is on the accordion header\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"For a collapsed panel, expands the associated panel.\"}),`\n`,(0,n.jsx)(e.li,{children:\"For an expanded panel, collapses the associated panel.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the next focusable element;\nall focusable elements in the accordion are included in\nthe page `,(0,n.jsx)(\"kbd\",{children:\"Tab\"}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Shift\"}),\" + \",(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the\nprevious focusable element; all focusable elements in the\naccordion are included in the page `,(0,n.jsx)(\"kbd\",{children:`\nTab\n`}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Down Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the next accordion header. If focus is on\nthe last accordion header, either does nothing or moves\nfocus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Up Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the previous accordion header. If focus is\non the first accordion header, either does nothing or\nmoves focus to the last accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Home\"}),`: When focus is on an accordion header,\nmoves focus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"End\"}),`: When focus is on an accordion header,\nmoves focus to the last accordion header.`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The focus of this question is on adding keyboard functionality, not the styling. We have provided the solution to \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\" here for you to build on top of. You can reuse the existing styling.\"]}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(u,o)})):u(o)}var f=v;function p(o){return(0,c.jsx)(f,{})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,c.jsx)(e,Object.assign({},o,{children:(0,c.jsx)(p,o)})):p(o)}var j=A;return k(q);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var y=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},d=(o,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!I.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return o};var l=(o,e,i)=>(i=o!=null?m(w(o)):{},d(e||!o||!o.__esModule?r(i,\"default\",{value:o,enumerable:!0}):i,o)),k=o=>d(r({},\"__esModule\",{value:!0}),o);var a=y((M,h)=>{h.exports=_jsx_runtime});var q={};x(q,{default:()=>j});var c=l(a());var n=l(a());function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", you should complete that question first before attempting this question. This question is not available in Vanilla JavaScript as it will require a fair bit of code to add keyboard interactions without a JavaScript framework.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\", we built a functional accordion component that has the necessary \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"WAI-ARIA roles, states, and properties\"}),\", which is actually pretty accessible. However, we can go one step further and add some optional keyboard interactions.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"We'll be following a modified subset of the \",(0,n.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\",children:\"necessary keyboard interactions for accordions\"}),\":\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"When \",(0,n.jsx)(\"kbd\",{children:\"Enter\"}),\" or \",(0,n.jsx)(\"kbd\",{children:\"Space\"}),\" is hit and focus is on the accordion header\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"For a collapsed panel, expands the associated panel.\"}),`\n`,(0,n.jsx)(e.li,{children:\"For an expanded panel, collapses the associated panel.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the next focusable element;\nall focusable elements in the accordion are included in\nthe page `,(0,n.jsx)(\"kbd\",{children:\"Tab\"}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Shift\"}),\" + \",(0,n.jsx)(\"kbd\",{children:\"Tab\"}),`: Moves focus to the\nprevious focusable element; all focusable elements in the\naccordion are included in the page `,(0,n.jsx)(\"kbd\",{children:`\nTab\n`}),\" sequence.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Down Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the next accordion header. If focus is on\nthe last accordion header, either does nothing or moves\nfocus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Up Arrow\"}),`: If focus is on an accordion header,\nmoves focus to the previous accordion header. If focus is\non the first accordion header, either does nothing or\nmoves focus to the last accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"Home\"}),`: When focus is on an accordion header,\nmoves focus to the first accordion header.`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(\"kbd\",{children:\"End\"}),`: When focus is on an accordion header,\nmoves focus to the last accordion header.`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The focus of this question is on adding keyboard functionality, not the styling. We have provided the solution to \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/accordion-ii\",children:\"Accordion II\"}),\" here for you to build on top of. You can reuse the existing styling.\"]}),`\n`]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(u,o)})):u(o)}var f=v;function p(o){return(0,c.jsx)(f,{})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,c.jsx)(e,Object.assign({},o,{children:(0,c.jsx)(p,o)})):p(o)}var j=A;return k(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/accordion/metadata.json b/apps/web/src/__generated__/questions/user-interface/accordion/metadata.json
index 84d7056aa..664702e61 100644
--- a/apps/web/src/__generated__/questions/user-interface/accordion/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/accordion/metadata.json
@@ -1,5 +1,5 @@
 {
-  "access": "free",
+  "access": "premium",
   "author": "yangshun",
   "companies": [],
   "created": 1671580800,
@@ -35,5 +35,7 @@
   "slug": "accordion",
   "subtitle": null,
   "title": "Accordion",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/analog-clock/metadata.json b/apps/web/src/__generated__/questions/user-interface/analog-clock/metadata.json
index 4edf0aa95..e21dd8483 100644
--- a/apps/web/src/__generated__/questions/user-interface/analog-clock/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/analog-clock/metadata.json
@@ -49,5 +49,8 @@
   "slug": "analog-clock",
   "subtitle": null,
   "title": "Analog Clock",
-  "topics": []
+  "topics": [
+    "a11y",
+    "async"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/auth-code-input/metadata.json b/apps/web/src/__generated__/questions/user-interface/auth-code-input/metadata.json
index c8d486246..61972b4e2 100644
--- a/apps/web/src/__generated__/questions/user-interface/auth-code-input/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/auth-code-input/metadata.json
@@ -29,5 +29,7 @@
   "slug": "auth-code-input",
   "subtitle": null,
   "title": "Auth Code Input",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/birth-year-histogram/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/birth-year-histogram/react/skeleton.json
index 6d4c9495a..8b14f5128 100644
--- a/apps/web/src/__generated__/questions/user-interface/birth-year-histogram/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/birth-year-histogram/react/skeleton.json
@@ -11,7 +11,7 @@
       "code": "import { useState } from 'react';\n\nexport default function App() {\n  const [message] = useState('Hello World!');\n\n  return <div>{message}</div>;\n}\n"
     },
     "/src/index.js": {
-      "code": "import React, { StrictMode } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport App from './App';\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(\n  <StrictMode>\n    <App />\n  </StrictMode>,\n);\n"
+      "code": "import React, { StrictMode } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport App from './App';\n\nimport './styles.css';\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(\n  <StrictMode>\n    <App />\n  </StrictMode>,\n);\n"
     },
     "/src/styles.css": {
       "code": "body {\n  font-family: sans-serif;\n  margin: 0;\n}\n"
diff --git a/apps/web/src/__generated__/questions/user-interface/contact-form/metadata.json b/apps/web/src/__generated__/questions/user-interface/contact-form/metadata.json
index b655d72cb..db9d36780 100644
--- a/apps/web/src/__generated__/questions/user-interface/contact-form/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/contact-form/metadata.json
@@ -50,5 +50,7 @@
   "slug": "contact-form",
   "subtitle": null,
   "title": "Contact Form",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/data-table-iv/react/solution.json b/apps/web/src/__generated__/questions/user-interface/data-table-iv/react/solution.json
index ef3c4fae3..076164e2f 100644
--- a/apps/web/src/__generated__/questions/user-interface/data-table-iv/react/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/data-table-iv/react/solution.json
@@ -8,7 +8,7 @@
       "code": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  </head>\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>\n"
     },
     "/src/App.tsx": {
-      "code": "import DataTable, {\n  Columns,\n  SortDirection,\n} from './DataTable';\nimport users from './data/users.json';\nimport houses from './data/houses.json';\n\ntype User = (typeof users)[number];\nconst userColumns: Columns<User> = [\n  {\n    label: 'ID',\n    key: 'id',\n    renderCell: (user: User) => user.id,\n    comparator: (\n      a: User,\n      b: User,\n      direction: SortDirection,\n    ) => (direction === 'asc' ? a.id - b.id : b.id - a.id),\n    filterType: null,\n  },\n  {\n    label: 'Name',\n    key: 'name',\n    renderCell: (user: User) => user.name,\n    comparator: (\n      a: User,\n      b: User,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.name.localeCompare(b.name)\n        : b.name.localeCompare(a.name),\n    filterType: 'string',\n  },\n  {\n    label: 'Age',\n    key: 'age',\n    renderCell: (user: User) => user.age,\n    comparator: (\n      a: User,\n      b: User,\n      direction: SortDirection,\n    ) => (direction === 'asc' ? a.id - b.id : b.id - a.id),\n    filterType: 'range',\n  },\n  {\n    label: 'Occupation',\n    key: 'occupation',\n    renderCell: (user: User) => user.occupation,\n    comparator: (\n      a: User,\n      b: User,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.occupation.localeCompare(b.occupation)\n        : b.occupation.localeCompare(a.occupation),\n    filterType: 'string',\n  },\n];\n\ntype House = (typeof houses)[number];\nconst houseColumns: Columns<House> = [\n  {\n    label: 'ID',\n    key: 'id',\n    renderCell: (house: House) => house.id,\n    comparator: (\n      a: House,\n      b: House,\n      direction: SortDirection,\n    ) => (direction === 'asc' ? a.id - b.id : b.id - a.id),\n    filterType: null,\n  },\n  {\n    label: 'Street',\n    key: 'street',\n    renderCell: (house: House) => house.street,\n    comparator: (\n      a: House,\n      b: House,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.street.localeCompare(b.street)\n        : b.street.localeCompare(a.street),\n    filterType: 'string',\n  },\n  {\n    label: 'City',\n    key: 'city',\n    renderCell: (house: House) => house.city,\n    comparator: (\n      a: House,\n      b: House,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.city.localeCompare(b.city)\n        : b.city.localeCompare(a.city),\n    filterType: 'string',\n  },\n  {\n    label: 'State',\n    key: 'state',\n    renderCell: (house: House) => house.state,\n    comparator: (\n      a: House,\n      b: House,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.state.localeCompare(b.state)\n        : b.state.localeCompare(a.state),\n    filterType: 'string',\n  },\n  {\n    label: 'Built Year',\n    key: 'built_year',\n    renderCell: (house: House) => house.built_year,\n    comparator: (\n      a: House,\n      b: House,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.built_year - b.built_year\n        : b.built_year - a.built_year,\n    filterType: 'range',\n  },\n];\n\nexport default function App() {\n  return (\n    <div>\n      <h2>Users</h2>\n      <DataTable data={users} columns={userColumns} />\n      <br />\n      <h2>Houses</h2>\n      <DataTable data={houses} columns={houseColumns} />\n    </div>\n  );\n}\n"
+      "code": "import DataTable, {\n  Columns,\n  SortDirection,\n} from './DataTable';\nimport users from './data/users.json';\nimport houses from './data/houses.json';\n\ntype User = (typeof users)[number];\nconst userColumns: Columns<User> = [\n  {\n    label: 'ID',\n    key: 'id',\n    renderCell: (user: User) => user.id,\n    comparator: (\n      a: User,\n      b: User,\n      direction: SortDirection,\n    ) => (direction === 'asc' ? a.id - b.id : b.id - a.id),\n    filterType: null,\n  },\n  {\n    label: 'Name',\n    key: 'name',\n    renderCell: (user: User) => user.name,\n    comparator: (\n      a: User,\n      b: User,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.name.localeCompare(b.name)\n        : b.name.localeCompare(a.name),\n    filterType: 'string',\n  },\n  {\n    label: 'Age',\n    key: 'age',\n    renderCell: (user: User) => user.age,\n    comparator: (\n      a: User,\n      b: User,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc' ? a.age - b.age : b.age - a.age,\n    filterType: 'range',\n  },\n  {\n    label: 'Occupation',\n    key: 'occupation',\n    renderCell: (user: User) => user.occupation,\n    comparator: (\n      a: User,\n      b: User,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.occupation.localeCompare(b.occupation)\n        : b.occupation.localeCompare(a.occupation),\n    filterType: 'string',\n  },\n];\n\ntype House = (typeof houses)[number];\nconst houseColumns: Columns<House> = [\n  {\n    label: 'ID',\n    key: 'id',\n    renderCell: (house: House) => house.id,\n    comparator: (\n      a: House,\n      b: House,\n      direction: SortDirection,\n    ) => (direction === 'asc' ? a.id - b.id : b.id - a.id),\n    filterType: null,\n  },\n  {\n    label: 'Street',\n    key: 'street',\n    renderCell: (house: House) => house.street,\n    comparator: (\n      a: House,\n      b: House,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.street.localeCompare(b.street)\n        : b.street.localeCompare(a.street),\n    filterType: 'string',\n  },\n  {\n    label: 'City',\n    key: 'city',\n    renderCell: (house: House) => house.city,\n    comparator: (\n      a: House,\n      b: House,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.city.localeCompare(b.city)\n        : b.city.localeCompare(a.city),\n    filterType: 'string',\n  },\n  {\n    label: 'State',\n    key: 'state',\n    renderCell: (house: House) => house.state,\n    comparator: (\n      a: House,\n      b: House,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.state.localeCompare(b.state)\n        : b.state.localeCompare(a.state),\n    filterType: 'string',\n  },\n  {\n    label: 'Built Year',\n    key: 'built_year',\n    renderCell: (house: House) => house.built_year,\n    comparator: (\n      a: House,\n      b: House,\n      direction: SortDirection,\n    ) =>\n      direction === 'asc'\n        ? a.built_year - b.built_year\n        : b.built_year - a.built_year,\n    filterType: 'range',\n  },\n];\n\nexport default function App() {\n  return (\n    <div>\n      <h2>Users</h2>\n      <DataTable data={users} columns={userColumns} />\n      <br />\n      <h2>Houses</h2>\n      <DataTable data={houses} columns={houseColumns} />\n    </div>\n  );\n}\n"
     },
     "/src/data/houses.json": {
       "code": "[\n  {\n    \"id\": 1,\n    \"street\": \"123 Maple St\",\n    \"city\": \"Springfield\",\n    \"state\": \"IL\",\n    \"zip\": \"62704\",\n    \"built_year\": 1990\n  },\n  {\n    \"id\": 2,\n    \"street\": \"456 Oak St\",\n    \"city\": \"Lincoln\",\n    \"state\": \"NE\",\n    \"zip\": \"68510\",\n    \"built_year\": 1985\n  },\n  {\n    \"id\": 3,\n    \"street\": \"789 Pine St\",\n    \"city\": \"Madison\",\n    \"state\": \"WI\",\n    \"zip\": \"53703\",\n    \"built_year\": 2000\n  },\n  {\n    \"id\": 4,\n    \"street\": \"101 Cedar St\",\n    \"city\": \"Columbus\",\n    \"state\": \"OH\",\n    \"zip\": \"43215\",\n    \"built_year\": 1978\n  },\n  {\n    \"id\": 5,\n    \"street\": \"102 Elm St\",\n    \"city\": \"Dover\",\n    \"state\": \"DE\",\n    \"zip\": \"19901\",\n    \"built_year\": 1995\n  },\n  {\n    \"id\": 6,\n    \"street\": \"103 Birch St\",\n    \"city\": \"Salem\",\n    \"state\": \"OR\",\n    \"zip\": \"97301\",\n    \"built_year\": 1980\n  },\n  {\n    \"id\": 7,\n    \"street\": \"104 Spruce St\",\n    \"city\": \"Albany\",\n    \"state\": \"NY\",\n    \"zip\": \"12207\",\n    \"built_year\": 1965\n  },\n  {\n    \"id\": 8,\n    \"street\": \"105 Walnut St\",\n    \"city\": \"Hartford\",\n    \"state\": \"CT\",\n    \"zip\": \"06103\",\n    \"built_year\": 1992\n  },\n  {\n    \"id\": 9,\n    \"street\": \"106 Chestnut St\",\n    \"city\": \"Raleigh\",\n    \"state\": \"NC\",\n    \"zip\": \"27601\",\n    \"built_year\": 1988\n  },\n  {\n    \"id\": 10,\n    \"street\": \"107 Ash St\",\n    \"city\": \"Bismarck\",\n    \"state\": \"ND\",\n    \"zip\": \"58501\",\n    \"built_year\": 1975\n  },\n  {\n    \"id\": 11,\n    \"street\": \"108 Willow St\",\n    \"city\": \"Richmond\",\n    \"state\": \"VA\",\n    \"zip\": \"23219\",\n    \"built_year\": 1982\n  },\n  {\n    \"id\": 12,\n    \"street\": \"109 Poplar St\",\n    \"city\": \"Jackson\",\n    \"state\": \"MS\",\n    \"zip\": \"39201\",\n    \"built_year\": 2005\n  },\n  {\n    \"id\": 13,\n    \"street\": \"110 Fir St\",\n    \"city\": \"Montgomery\",\n    \"state\": \"AL\",\n    \"zip\": \"36104\",\n    \"built_year\": 1999\n  },\n  {\n    \"id\": 14,\n    \"street\": \"111 Cypress St\",\n    \"city\": \"Little Rock\",\n    \"state\": \"AR\",\n    \"zip\": \"72201\",\n    \"built_year\": 1983\n  },\n  {\n    \"id\": 15,\n    \"street\": \"112 Sycamore St\",\n    \"city\": \"Tallahassee\",\n    \"state\": \"FL\",\n    \"zip\": \"32301\",\n    \"built_year\": 1998\n  },\n  {\n    \"id\": 16,\n    \"street\": \"113 Redwood St\",\n    \"city\": \"Atlanta\",\n    \"state\": \"GA\",\n    \"zip\": \"30303\",\n    \"built_year\": 2003\n  },\n  {\n    \"id\": 17,\n    \"street\": \"114 Palm St\",\n    \"city\": \"Boise\",\n    \"state\": \"ID\",\n    \"zip\": \"83702\",\n    \"built_year\": 1989\n  },\n  {\n    \"id\": 18,\n    \"street\": \"115 Hickory St\",\n    \"city\": \"Frankfort\",\n    \"state\": \"KY\",\n    \"zip\": \"40601\",\n    \"built_year\": 1972\n  },\n  {\n    \"id\": 19,\n    \"street\": \"116 Magnolia St\",\n    \"city\": \"Baton Rouge\",\n    \"state\": \"LA\",\n    \"zip\": \"70801\",\n    \"built_year\": 1993\n  },\n  {\n    \"id\": 20,\n    \"street\": \"117 Dogwood St\",\n    \"city\": \"Annapolis\",\n    \"state\": \"MD\",\n    \"zip\": \"21401\",\n    \"built_year\": 1984\n  },\n  {\n    \"id\": 21,\n    \"street\": \"118 Juniper St\",\n    \"city\": \"Boston\",\n    \"state\": \"MA\",\n    \"zip\": \"02108\",\n    \"built_year\": 2001\n  },\n  {\n    \"id\": 22,\n    \"street\": \"119 Maple St\",\n    \"city\": \"Lansing\",\n    \"state\": \"MI\",\n    \"zip\": \"48933\",\n    \"built_year\": 1976\n  },\n  {\n    \"id\": 23,\n    \"street\": \"120 Oak St\",\n    \"city\": \"St. Paul\",\n    \"state\": \"MN\",\n    \"zip\": \"55101\",\n    \"built_year\": 1994\n  },\n  {\n    \"id\": 24,\n    \"street\": \"121 Pine St\",\n    \"city\": \"Jefferson City\",\n    \"state\": \"MO\",\n    \"zip\": \"65101\",\n    \"built_year\": 1987\n  },\n  {\n    \"id\": 25,\n    \"street\": \"122 Cedar St\",\n    \"city\": \"Helena\",\n    \"state\": \"MT\",\n    \"zip\": \"59601\",\n    \"built_year\": 1991\n  },\n  {\n    \"id\": 26,\n    \"street\": \"123 Elm St\",\n    \"city\": \"Concord\",\n    \"state\": \"NH\",\n    \"zip\": \"03301\",\n    \"built_year\": 1971\n  },\n  {\n    \"id\": 27,\n    \"street\": \"124 Birch St\",\n    \"city\": \"Trenton\",\n    \"state\": \"NJ\",\n    \"zip\": \"08608\",\n    \"built_year\": 1996\n  },\n  {\n    \"id\": 28,\n    \"street\": \"125 Spruce St\",\n    \"city\": \"Santa Fe\",\n    \"state\": \"NM\",\n    \"zip\": \"87501\",\n    \"built_year\": 1981\n  },\n  {\n    \"id\": 29,\n    \"street\": \"126 Walnut St\",\n    \"city\": \"Albany\",\n    \"state\": \"NY\",\n    \"zip\": \"12207\",\n    \"built_year\": 2006\n  },\n  {\n    \"id\": 30,\n    \"street\": \"127 Chestnut St\",\n    \"city\": \"Columbus\",\n    \"state\": \"OH\",\n    \"zip\": \"43215\",\n    \"built_year\": 1979\n  },\n  {\n    \"id\": 31,\n    \"street\": \"128 Ash St\",\n    \"city\": \"Oklahoma City\",\n    \"state\": \"OK\",\n    \"zip\": \"73102\",\n    \"built_year\": 1997\n  },\n  {\n    \"id\": 32,\n    \"street\": \"129 Willow St\",\n    \"city\": \"Salem\",\n    \"state\": \"OR\",\n    \"zip\": \"97301\",\n    \"built_year\": 1986\n  },\n  {\n    \"id\": 33,\n    \"street\": \"130 Poplar St\",\n    \"city\": \"Harrisburg\",\n    \"state\": \"PA\",\n    \"zip\": \"17101\",\n    \"built_year\": 1974\n  },\n  {\n    \"id\": 34,\n    \"street\": \"131 Fir St\",\n    \"city\": \"Providence\",\n    \"state\": \"RI\",\n    \"zip\": \"02903\",\n    \"built_year\": 2002\n  },\n  {\n    \"id\": 35,\n    \"street\": \"132 Cypress St\",\n    \"city\": \"Columbia\",\n    \"state\": \"SC\",\n    \"zip\": \"29201\",\n    \"built_year\": 1985\n  },\n  {\n    \"id\": 36,\n    \"street\": \"133 Sycamore St\",\n    \"city\": \"Pierre\",\n    \"state\": \"SD\",\n    \"zip\": \"57501\",\n    \"built_year\": 1990\n  },\n  {\n    \"id\": 37,\n    \"street\": \"134 Redwood St\",\n    \"city\": \"Nashville\",\n    \"state\": \"TN\",\n    \"zip\": \"37219\",\n    \"built_year\": 2004\n  },\n  {\n    \"id\": 38,\n    \"street\": \"135 Palm St\",\n    \"city\": \"Austin\",\n    \"state\": \"TX\",\n    \"zip\": \"78701\",\n    \"built_year\": 1998\n  },\n  {\n    \"id\": 39,\n    \"street\": \"136 Hickory St\",\n    \"city\": \"Salt Lake City\",\n    \"state\": \"UT\",\n    \"zip\": \"84101\",\n    \"built_year\": 1977\n  },\n  {\n    \"id\": 40,\n    \"street\": \"137 Magnolia St\",\n    \"city\": \"Montpelier\",\n    \"state\": \"VT\",\n    \"zip\": \"05602\",\n    \"built_year\": 1992\n  },\n  {\n    \"id\": 41,\n    \"street\": \"138 Dogwood St\",\n    \"city\": \"Richmond\",\n    \"state\": \"VA\",\n    \"zip\": \"23219\",\n    \"built_year\": 1983\n  },\n  {\n    \"id\": 42,\n    \"street\": \"139 Juniper St\",\n    \"city\": \"Olympia\",\n    \"state\": \"WA\",\n    \"zip\": \"98501\",\n    \"built_year\": 1999\n  },\n  {\n    \"id\": 43,\n    \"street\": \"140 Maple St\",\n    \"city\": \"Charleston\",\n    \"state\": \"WV\",\n    \"zip\": \"25301\",\n    \"built_year\": 1973\n  },\n  {\n    \"id\": 44,\n    \"street\": \"141 Oak St\",\n    \"city\": \"Madison\",\n    \"state\": \"WI\",\n    \"zip\": \"53703\",\n    \"built_year\": 2000\n  },\n  {\n    \"id\": 45,\n    \"street\": \"142 Pine St\",\n    \"city\": \"Cheyenne\",\n    \"state\": \"WY\",\n    \"zip\": \"82001\",\n    \"built_year\": 1981\n  },\n  {\n    \"id\": 46,\n    \"street\": \"143 Cedar St\",\n    \"city\": \"Juneau\",\n    \"state\": \"AK\",\n    \"zip\": \"99801\",\n    \"built_year\": 1995\n  },\n  {\n    \"id\": 47,\n    \"street\": \"144 Elm St\",\n    \"city\": \"Phoenix\",\n    \"state\": \"AZ\",\n    \"zip\": \"85001\",\n    \"built_year\": 1970\n  },\n  {\n    \"id\": 48,\n    \"street\": \"145 Birch St\",\n    \"city\": \"Denver\",\n    \"state\": \"CO\",\n    \"zip\": \"80201\",\n    \"built_year\": 2003\n  }\n]\n"
diff --git a/apps/web/src/__generated__/questions/user-interface/dice-roller/angular/skeleton.json b/apps/web/src/__generated__/questions/user-interface/dice-roller/angular/skeleton.json
index b5578c1a3..f65224eda 100644
--- a/apps/web/src/__generated__/questions/user-interface/dice-roller/angular/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/dice-roller/angular/skeleton.json
@@ -47,5 +47,5 @@
     "activeFile": "/src/app/app.component.ts",
     "environment": "angular-cli"
   },
-  "writeup": "var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of x(e))!j.call(n,l)&&l!==i&&r(n,l,{get:()=>e[l],enumerable:!(c=g(e,l))||c.enumerable});return n};var d=(n,e,i)=>(i=n!=null?f(b(n)):{},a(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>a(r({},\"__esModule\",{value:!0}),n);var s=w((R,u)=>{u.exports=_jsx_runtime});var q={};D(q,{default:()=>M});var o=d(s());var t=d(s());function h(n){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The user can specify the number of dice to roll using the input field and the value can be an integer between 1 to 12 inclusive.\"}),`\n`,(0,t.jsx)(e.li,{children:'Upon clicking the \"Roll\" button, the dice roll is simulated and the results are displayed.'}),`\n`,(0,t.jsx)(e.li,{children:\"The results of the dice roll should be displayed in rows of three.\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"The example below shows a potential result of rolling 6 dice.\"}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.img,{src:\"/img/questions/dice-roller/dice-roller-example.png\",alt:\"Dice roller example\"})}),`\n`,(0,t.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"This question is adapted from \",(0,t.jsx)(e.a,{href:\"https://frontendeval.com/questions/rolling-dice\",children:\"FrontendEval's Rolling Dice question\"}),\".\"]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var m=v;function p(n){return(0,o.jsx)(m,{})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(p,n)})):p(n)}var M=y;return _(q);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of x(e))!j.call(n,l)&&l!==i&&r(n,l,{get:()=>e[l],enumerable:!(c=g(e,l))||c.enumerable});return n};var d=(n,e,i)=>(i=n!=null?f(b(n)):{},a(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>a(r({},\"__esModule\",{value:!0}),n);var s=w((R,u)=>{u.exports=_jsx_runtime});var q={};D(q,{default:()=>M});var o=d(s());var t=d(s());function h(n){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The user can specify the number of dice to roll using the input field and the value can be an integer between 1 to 12 inclusive.\"}),`\n`,(0,t.jsx)(e.li,{children:'Upon clicking the \"Roll\" button, the dice roll is simulated and the results are displayed.'}),`\n`,(0,t.jsx)(e.li,{children:\"The results of the dice roll should be displayed in rows of three.\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"The example below shows a potential result of rolling 6 dice.\"}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.img,{src:\"/img/questions/dice-roller/dice-roller-example.png\",alt:\"Dice roller example\"})}),`\n`,(0,t.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"This question is adapted from \",(0,t.jsx)(e.a,{href:\"https://frontendeval.com/questions/rolling-dice\",children:\"FrontendEval's Rolling Dice question\"}),\".\"]})]})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var m=y;function p(n){return(0,o.jsx)(m,{})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(p,n)})):p(n)}var M=v;return _(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/dice-roller/metadata.json b/apps/web/src/__generated__/questions/user-interface/dice-roller/metadata.json
index e7f08e18c..c933dcc95 100644
--- a/apps/web/src/__generated__/questions/user-interface/dice-roller/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/dice-roller/metadata.json
@@ -41,5 +41,7 @@
   "slug": "dice-roller",
   "subtitle": null,
   "title": "Dice Roller",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/dice-roller/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/dice-roller/react/skeleton.json
index 55fe672e7..987a744ff 100644
--- a/apps/web/src/__generated__/questions/user-interface/dice-roller/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/dice-roller/react/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of x(e))!j.call(n,l)&&l!==i&&r(n,l,{get:()=>e[l],enumerable:!(c=g(e,l))||c.enumerable});return n};var d=(n,e,i)=>(i=n!=null?f(b(n)):{},a(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>a(r({},\"__esModule\",{value:!0}),n);var s=w((R,u)=>{u.exports=_jsx_runtime});var q={};D(q,{default:()=>M});var o=d(s());var t=d(s());function h(n){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The user can specify the number of dice to roll using the input field and the value can be an integer between 1 to 12 inclusive.\"}),`\n`,(0,t.jsx)(e.li,{children:'Upon clicking the \"Roll\" button, the dice roll is simulated and the results are displayed.'}),`\n`,(0,t.jsx)(e.li,{children:\"The results of the dice roll should be displayed in rows of three.\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"The example below shows a potential result of rolling 6 dice.\"}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.img,{src:\"/img/questions/dice-roller/dice-roller-example.png\",alt:\"Dice roller example\"})}),`\n`,(0,t.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"This question is adapted from \",(0,t.jsx)(e.a,{href:\"https://frontendeval.com/questions/rolling-dice\",children:\"FrontendEval's Rolling Dice question\"}),\".\"]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var m=v;function p(n){return(0,o.jsx)(m,{})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(p,n)})):p(n)}var M=y;return _(q);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of x(e))!j.call(n,l)&&l!==i&&r(n,l,{get:()=>e[l],enumerable:!(c=g(e,l))||c.enumerable});return n};var d=(n,e,i)=>(i=n!=null?f(b(n)):{},a(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>a(r({},\"__esModule\",{value:!0}),n);var s=w((R,u)=>{u.exports=_jsx_runtime});var q={};D(q,{default:()=>M});var o=d(s());var t=d(s());function h(n){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The user can specify the number of dice to roll using the input field and the value can be an integer between 1 to 12 inclusive.\"}),`\n`,(0,t.jsx)(e.li,{children:'Upon clicking the \"Roll\" button, the dice roll is simulated and the results are displayed.'}),`\n`,(0,t.jsx)(e.li,{children:\"The results of the dice roll should be displayed in rows of three.\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"The example below shows a potential result of rolling 6 dice.\"}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.img,{src:\"/img/questions/dice-roller/dice-roller-example.png\",alt:\"Dice roller example\"})}),`\n`,(0,t.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"This question is adapted from \",(0,t.jsx)(e.a,{href:\"https://frontendeval.com/questions/rolling-dice\",children:\"FrontendEval's Rolling Dice question\"}),\".\"]})]})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var m=y;function p(n){return(0,o.jsx)(m,{})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(p,n)})):p(n)}var M=v;return _(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/dice-roller/svelte/skeleton.json b/apps/web/src/__generated__/questions/user-interface/dice-roller/svelte/skeleton.json
index 61ce743f2..1c9941221 100644
--- a/apps/web/src/__generated__/questions/user-interface/dice-roller/svelte/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/dice-roller/svelte/skeleton.json
@@ -24,5 +24,5 @@
     "activeFile": "/src/App.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of x(e))!j.call(n,l)&&l!==i&&r(n,l,{get:()=>e[l],enumerable:!(c=g(e,l))||c.enumerable});return n};var d=(n,e,i)=>(i=n!=null?f(b(n)):{},a(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>a(r({},\"__esModule\",{value:!0}),n);var s=w((R,u)=>{u.exports=_jsx_runtime});var q={};D(q,{default:()=>M});var o=d(s());var t=d(s());function h(n){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The user can specify the number of dice to roll using the input field and the value can be an integer between 1 to 12 inclusive.\"}),`\n`,(0,t.jsx)(e.li,{children:'Upon clicking the \"Roll\" button, the dice roll is simulated and the results are displayed.'}),`\n`,(0,t.jsx)(e.li,{children:\"The results of the dice roll should be displayed in rows of three.\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"The example below shows a potential result of rolling 6 dice.\"}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.img,{src:\"/img/questions/dice-roller/dice-roller-example.png\",alt:\"Dice roller example\"})}),`\n`,(0,t.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"This question is adapted from \",(0,t.jsx)(e.a,{href:\"https://frontendeval.com/questions/rolling-dice\",children:\"FrontendEval's Rolling Dice question\"}),\".\"]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var m=v;function p(n){return(0,o.jsx)(m,{})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(p,n)})):p(n)}var M=y;return _(q);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of x(e))!j.call(n,l)&&l!==i&&r(n,l,{get:()=>e[l],enumerable:!(c=g(e,l))||c.enumerable});return n};var d=(n,e,i)=>(i=n!=null?f(b(n)):{},a(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>a(r({},\"__esModule\",{value:!0}),n);var s=w((R,u)=>{u.exports=_jsx_runtime});var q={};D(q,{default:()=>M});var o=d(s());var t=d(s());function h(n){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The user can specify the number of dice to roll using the input field and the value can be an integer between 1 to 12 inclusive.\"}),`\n`,(0,t.jsx)(e.li,{children:'Upon clicking the \"Roll\" button, the dice roll is simulated and the results are displayed.'}),`\n`,(0,t.jsx)(e.li,{children:\"The results of the dice roll should be displayed in rows of three.\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"The example below shows a potential result of rolling 6 dice.\"}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.img,{src:\"/img/questions/dice-roller/dice-roller-example.png\",alt:\"Dice roller example\"})}),`\n`,(0,t.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"This question is adapted from \",(0,t.jsx)(e.a,{href:\"https://frontendeval.com/questions/rolling-dice\",children:\"FrontendEval's Rolling Dice question\"}),\".\"]})]})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var m=y;function p(n){return(0,o.jsx)(m,{})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(p,n)})):p(n)}var M=v;return _(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/dice-roller/vue/skeleton.json b/apps/web/src/__generated__/questions/user-interface/dice-roller/vue/skeleton.json
index a1bbe80a3..d92d19a04 100644
--- a/apps/web/src/__generated__/questions/user-interface/dice-roller/vue/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/dice-roller/vue/skeleton.json
@@ -24,5 +24,5 @@
     "activeFile": "/src/App.vue",
     "environment": "vue-cli"
   },
-  "writeup": "var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of x(e))!j.call(n,l)&&l!==i&&r(n,l,{get:()=>e[l],enumerable:!(c=g(e,l))||c.enumerable});return n};var d=(n,e,i)=>(i=n!=null?f(b(n)):{},a(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>a(r({},\"__esModule\",{value:!0}),n);var s=w((R,u)=>{u.exports=_jsx_runtime});var q={};D(q,{default:()=>M});var o=d(s());var t=d(s());function h(n){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The user can specify the number of dice to roll using the input field and the value can be an integer between 1 to 12 inclusive.\"}),`\n`,(0,t.jsx)(e.li,{children:'Upon clicking the \"Roll\" button, the dice roll is simulated and the results are displayed.'}),`\n`,(0,t.jsx)(e.li,{children:\"The results of the dice roll should be displayed in rows of three.\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"The example below shows a potential result of rolling 6 dice.\"}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.img,{src:\"/img/questions/dice-roller/dice-roller-example.png\",alt:\"Dice roller example\"})}),`\n`,(0,t.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"This question is adapted from \",(0,t.jsx)(e.a,{href:\"https://frontendeval.com/questions/rolling-dice\",children:\"FrontendEval's Rolling Dice question\"}),\".\"]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var m=v;function p(n){return(0,o.jsx)(m,{})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(p,n)})):p(n)}var M=y;return _(q);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var i in e)r(n,i,{get:e[i],enumerable:!0})},a=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of x(e))!j.call(n,l)&&l!==i&&r(n,l,{get:()=>e[l],enumerable:!(c=g(e,l))||c.enumerable});return n};var d=(n,e,i)=>(i=n!=null?f(b(n)):{},a(e||!n||!n.__esModule?r(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>a(r({},\"__esModule\",{value:!0}),n);var s=w((R,u)=>{u.exports=_jsx_runtime});var q={};D(q,{default:()=>M});var o=d(s());var t=d(s());function h(n){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"The user can specify the number of dice to roll using the input field and the value can be an integer between 1 to 12 inclusive.\"}),`\n`,(0,t.jsx)(e.li,{children:'Upon clicking the \"Roll\" button, the dice roll is simulated and the results are displayed.'}),`\n`,(0,t.jsx)(e.li,{children:\"The results of the dice roll should be displayed in rows of three.\"}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"The example below shows a potential result of rolling 6 dice.\"}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.img,{src:\"/img/questions/dice-roller/dice-roller-example.png\",alt:\"Dice roller example\"})}),`\n`,(0,t.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"This question is adapted from \",(0,t.jsx)(e.a,{href:\"https://frontendeval.com/questions/rolling-dice\",children:\"FrontendEval's Rolling Dice question\"}),\".\"]})]})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var m=y;function p(n){return(0,o.jsx)(m,{})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(p,n)})):p(n)}var M=v;return _(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/digital-clock/angular/skeleton.json b/apps/web/src/__generated__/questions/user-interface/digital-clock/angular/skeleton.json
index a3f52e619..f931cde5b 100644
--- a/apps/web/src/__generated__/questions/user-interface/digital-clock/angular/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/digital-clock/angular/skeleton.json
@@ -47,5 +47,5 @@
     "activeFile": "/src/app/app.component.ts",
     "environment": "angular-cli"
   },
-  "writeup": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var k=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},l=(e,t,i,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!j.call(e,r)&&r!==i&&a(e,r,{get:()=>t[r],enumerable:!(c=p(t,r))||c.enumerable});return e};var u=(e,t,i)=>(i=e!=null?h(y(e)):{},l(t||!e||!e.__esModule?a(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>l(a({},\"__esModule\",{value:!0}),e);var s=k((X,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>M});var o=u(s());var n=u(s());function m(e){let t=Object.assign({p:\"p\",img:\"img\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.\"}),`\n`,(0,n.jsx)(t.p,{children:\"Here's an example of a digital clock. Each digit needs to be rendered by individual segments, but you can exercise your creativity by choosing different colors and styling it differently. It should however still function as a clock, allowing the user to read the time.\"}),`\n`,(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:\"/img/questions/digital-clock/digital-clock-example.jpg\",alt:\"Digital clock example\"})})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var g=w;function f(e){return(0,o.jsx)(g,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)}var M=D;return b(v);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var k=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)r(e,i,{get:t[i],enumerable:!0})},l=(e,t,i,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let a of x(t))!j.call(e,a)&&a!==i&&r(e,a,{get:()=>t[a],enumerable:!(c=p(t,a))||c.enumerable});return e};var u=(e,t,i)=>(i=e!=null?h(y(e)):{},l(t||!e||!e.__esModule?r(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>l(r({},\"__esModule\",{value:!0}),e);var s=k((X,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>M});var o=u(s());var n=u(s());function m(e){let t=Object.assign({p:\"p\",img:\"img\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.\"}),`\n`,(0,n.jsx)(t.p,{children:\"Here's an example of a digital clock. Each digit needs to be rendered by individual segments, but you can exercise your creativity by choosing different colors and styling it differently. It should however still function as a clock, allowing the user to read the time.\"}),`\n`,(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:\"/img/questions/digital-clock/digital-clock-example.jpg\",alt:\"Digital clock example\"})})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var g=w;function f(e){return(0,o.jsx)(g,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)}var M=D;return b(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/digital-clock/metadata.json b/apps/web/src/__generated__/questions/user-interface/digital-clock/metadata.json
index 4b4296f8a..d80d9f26e 100644
--- a/apps/web/src/__generated__/questions/user-interface/digital-clock/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/digital-clock/metadata.json
@@ -47,5 +47,8 @@
   "slug": "digital-clock",
   "subtitle": null,
   "title": "Digital Clock",
-  "topics": []
+  "topics": [
+    "a11y",
+    "async"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/digital-clock/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/digital-clock/react/skeleton.json
index e7c4f5198..aa3431f87 100644
--- a/apps/web/src/__generated__/questions/user-interface/digital-clock/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/digital-clock/react/skeleton.json
@@ -29,5 +29,5 @@
     "activeFile": "/src/Clock.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var k=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},l=(e,t,i,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!j.call(e,r)&&r!==i&&a(e,r,{get:()=>t[r],enumerable:!(c=p(t,r))||c.enumerable});return e};var u=(e,t,i)=>(i=e!=null?h(y(e)):{},l(t||!e||!e.__esModule?a(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>l(a({},\"__esModule\",{value:!0}),e);var s=k((X,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>M});var o=u(s());var n=u(s());function m(e){let t=Object.assign({p:\"p\",img:\"img\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.\"}),`\n`,(0,n.jsx)(t.p,{children:\"Here's an example of a digital clock. Each digit needs to be rendered by individual segments, but you can exercise your creativity by choosing different colors and styling it differently. It should however still function as a clock, allowing the user to read the time.\"}),`\n`,(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:\"/img/questions/digital-clock/digital-clock-example.jpg\",alt:\"Digital clock example\"})})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var g=w;function f(e){return(0,o.jsx)(g,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)}var M=D;return b(v);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var k=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)r(e,i,{get:t[i],enumerable:!0})},l=(e,t,i,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let a of x(t))!j.call(e,a)&&a!==i&&r(e,a,{get:()=>t[a],enumerable:!(c=p(t,a))||c.enumerable});return e};var u=(e,t,i)=>(i=e!=null?h(y(e)):{},l(t||!e||!e.__esModule?r(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>l(r({},\"__esModule\",{value:!0}),e);var s=k((X,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>M});var o=u(s());var n=u(s());function m(e){let t=Object.assign({p:\"p\",img:\"img\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.\"}),`\n`,(0,n.jsx)(t.p,{children:\"Here's an example of a digital clock. Each digit needs to be rendered by individual segments, but you can exercise your creativity by choosing different colors and styling it differently. It should however still function as a clock, allowing the user to read the time.\"}),`\n`,(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:\"/img/questions/digital-clock/digital-clock-example.jpg\",alt:\"Digital clock example\"})})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var g=w;function f(e){return(0,o.jsx)(g,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)}var M=D;return b(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/digital-clock/svelte/skeleton.json b/apps/web/src/__generated__/questions/user-interface/digital-clock/svelte/skeleton.json
index eaeea2664..6b1ddda08 100644
--- a/apps/web/src/__generated__/questions/user-interface/digital-clock/svelte/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/digital-clock/svelte/skeleton.json
@@ -28,5 +28,5 @@
     "activeFile": "/src/Clock.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var k=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},l=(e,t,i,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!j.call(e,r)&&r!==i&&a(e,r,{get:()=>t[r],enumerable:!(c=p(t,r))||c.enumerable});return e};var u=(e,t,i)=>(i=e!=null?h(y(e)):{},l(t||!e||!e.__esModule?a(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>l(a({},\"__esModule\",{value:!0}),e);var s=k((X,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>M});var o=u(s());var n=u(s());function m(e){let t=Object.assign({p:\"p\",img:\"img\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.\"}),`\n`,(0,n.jsx)(t.p,{children:\"Here's an example of a digital clock. Each digit needs to be rendered by individual segments, but you can exercise your creativity by choosing different colors and styling it differently. It should however still function as a clock, allowing the user to read the time.\"}),`\n`,(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:\"/img/questions/digital-clock/digital-clock-example.jpg\",alt:\"Digital clock example\"})})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var g=w;function f(e){return(0,o.jsx)(g,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)}var M=D;return b(v);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var k=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)r(e,i,{get:t[i],enumerable:!0})},l=(e,t,i,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let a of x(t))!j.call(e,a)&&a!==i&&r(e,a,{get:()=>t[a],enumerable:!(c=p(t,a))||c.enumerable});return e};var u=(e,t,i)=>(i=e!=null?h(y(e)):{},l(t||!e||!e.__esModule?r(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>l(r({},\"__esModule\",{value:!0}),e);var s=k((X,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>M});var o=u(s());var n=u(s());function m(e){let t=Object.assign({p:\"p\",img:\"img\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.\"}),`\n`,(0,n.jsx)(t.p,{children:\"Here's an example of a digital clock. Each digit needs to be rendered by individual segments, but you can exercise your creativity by choosing different colors and styling it differently. It should however still function as a clock, allowing the user to read the time.\"}),`\n`,(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:\"/img/questions/digital-clock/digital-clock-example.jpg\",alt:\"Digital clock example\"})})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var g=w;function f(e){return(0,o.jsx)(g,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)}var M=D;return b(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/digital-clock/vanilla/skeleton.json b/apps/web/src/__generated__/questions/user-interface/digital-clock/vanilla/skeleton.json
index cf542ca11..f4efb69b9 100644
--- a/apps/web/src/__generated__/questions/user-interface/digital-clock/vanilla/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/digital-clock/vanilla/skeleton.json
@@ -23,5 +23,5 @@
     "activeFile": "/src/index.html",
     "environment": "parcel"
   },
-  "writeup": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var k=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},l=(e,t,i,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!j.call(e,r)&&r!==i&&a(e,r,{get:()=>t[r],enumerable:!(c=p(t,r))||c.enumerable});return e};var u=(e,t,i)=>(i=e!=null?h(y(e)):{},l(t||!e||!e.__esModule?a(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>l(a({},\"__esModule\",{value:!0}),e);var s=k((X,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>M});var o=u(s());var n=u(s());function m(e){let t=Object.assign({p:\"p\",img:\"img\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.\"}),`\n`,(0,n.jsx)(t.p,{children:\"Here's an example of a digital clock. Each digit needs to be rendered by individual segments, but you can exercise your creativity by choosing different colors and styling it differently. It should however still function as a clock, allowing the user to read the time.\"}),`\n`,(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:\"/img/questions/digital-clock/digital-clock-example.jpg\",alt:\"Digital clock example\"})})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var g=w;function f(e){return(0,o.jsx)(g,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)}var M=D;return b(v);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var k=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)r(e,i,{get:t[i],enumerable:!0})},l=(e,t,i,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let a of x(t))!j.call(e,a)&&a!==i&&r(e,a,{get:()=>t[a],enumerable:!(c=p(t,a))||c.enumerable});return e};var u=(e,t,i)=>(i=e!=null?h(y(e)):{},l(t||!e||!e.__esModule?r(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>l(r({},\"__esModule\",{value:!0}),e);var s=k((X,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>M});var o=u(s());var n=u(s());function m(e){let t=Object.assign({p:\"p\",img:\"img\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.\"}),`\n`,(0,n.jsx)(t.p,{children:\"Here's an example of a digital clock. Each digit needs to be rendered by individual segments, but you can exercise your creativity by choosing different colors and styling it differently. It should however still function as a clock, allowing the user to read the time.\"}),`\n`,(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:\"/img/questions/digital-clock/digital-clock-example.jpg\",alt:\"Digital clock example\"})})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var g=w;function f(e){return(0,o.jsx)(g,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)}var M=D;return b(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/digital-clock/vue/skeleton.json b/apps/web/src/__generated__/questions/user-interface/digital-clock/vue/skeleton.json
index 74cc4a40a..ca2c2932e 100644
--- a/apps/web/src/__generated__/questions/user-interface/digital-clock/vue/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/digital-clock/vue/skeleton.json
@@ -24,5 +24,5 @@
     "activeFile": "/src/App.vue",
     "environment": "vue-cli"
   },
-  "writeup": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var k=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},l=(e,t,i,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!j.call(e,r)&&r!==i&&a(e,r,{get:()=>t[r],enumerable:!(c=p(t,r))||c.enumerable});return e};var u=(e,t,i)=>(i=e!=null?h(y(e)):{},l(t||!e||!e.__esModule?a(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>l(a({},\"__esModule\",{value:!0}),e);var s=k((X,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>M});var o=u(s());var n=u(s());function m(e){let t=Object.assign({p:\"p\",img:\"img\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.\"}),`\n`,(0,n.jsx)(t.p,{children:\"Here's an example of a digital clock. Each digit needs to be rendered by individual segments, but you can exercise your creativity by choosing different colors and styling it differently. It should however still function as a clock, allowing the user to read the time.\"}),`\n`,(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:\"/img/questions/digital-clock/digital-clock-example.jpg\",alt:\"Digital clock example\"})})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var g=w;function f(e){return(0,o.jsx)(g,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)}var M=D;return b(v);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var k=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)r(e,i,{get:t[i],enumerable:!0})},l=(e,t,i,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let a of x(t))!j.call(e,a)&&a!==i&&r(e,a,{get:()=>t[a],enumerable:!(c=p(t,a))||c.enumerable});return e};var u=(e,t,i)=>(i=e!=null?h(y(e)):{},l(t||!e||!e.__esModule?r(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>l(r({},\"__esModule\",{value:!0}),e);var s=k((X,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>M});var o=u(s());var n=u(s());function m(e){let t=Object.assign({p:\"p\",img:\"img\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.\"}),`\n`,(0,n.jsx)(t.p,{children:\"Here's an example of a digital clock. Each digit needs to be rendered by individual segments, but you can exercise your creativity by choosing different colors and styling it differently. It should however still function as a clock, allowing the user to read the time.\"}),`\n`,(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:\"/img/questions/digital-clock/digital-clock-example.jpg\",alt:\"Digital clock example\"})})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var g=w;function f(e){return(0,o.jsx)(g,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)}var M=D;return b(v);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/file-explorer-iii/metadata.json b/apps/web/src/__generated__/questions/user-interface/file-explorer-iii/metadata.json
index 4d651de52..8c7f89955 100644
--- a/apps/web/src/__generated__/questions/user-interface/file-explorer-iii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/file-explorer-iii/metadata.json
@@ -27,7 +27,7 @@
     "js"
   ],
   "nextQuestions": [
-    "file-explorer-iii"
+    "nested-checkboxes"
   ],
   "published": true,
   "ranking": 100,
diff --git a/apps/web/src/__generated__/questions/user-interface/file-explorer-iii/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/file-explorer-iii/react/skeleton.json
index 85392cc03..49c63d5e9 100644
--- a/apps/web/src/__generated__/questions/user-interface/file-explorer-iii/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/file-explorer-iii/react/skeleton.json
@@ -35,5 +35,5 @@
     "activeFile": "/src/FileExplorer.tsx",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},d=(t,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!y.call(t,r)&&r!==i&&s(t,r,{get:()=>e[r],enumerable:!(l=g(e,r))||l.enumerable});return t};var u=(t,e,i)=>(i=t!=null?m(b(t)):{},d(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),j=t=>d(s({},\"__esModule\",{value:!0}),t);var a=w((C,c)=>{c.exports=_jsx_runtime});var q={};v(q,{default:()=>_});var o=u(a());var n=u(a());function h(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",pre:\"pre\",code:\"code\",h2:\"h2\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is a follow up to the \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/file-explorer\",children:\"File Explorer\"}),\" question, you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/file-explorer\",children:\"File Explorer\"}),\", we built a functional file explorer component that displays an array of file objects in a hierarchical tree format using a nested DOM structure.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"The other possible structure is having a single flat list of items and add the right amount of padding for descendant items. While recursing, the current level will need to be passed as an argument so that the descendant items know what how much padding to render.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!-- The bullets will have to be hidden as\n they will still be flushed to the left. -->\n<ul>\n  <li>docs</li>\n  <li style=\"padding-left: 16px\">foo.md</li>\n  <li style=\"padding-left: 16px\">bar.md</li>\n  <li>README.md</li>\n</ul>\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"A single flat list of DOM elements is easier to traverse. Also, this flat approach provides the most control over the rendering and allows for virtualized items in large directories that contain many files. Virtualization is not easy to achieve using a nested structure because in order for items to be indented by the right amount, their parents have to be rendered as well \\u2013 a nested structure makes it hard or even impossible to render only the minimal items that need to be displayed.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This flat approach is used by \",(0,n.jsx)(e.a,{href:\"https://github.dev/yangshun/top-javascript-interview-questions/\",children:\"VS Code\"}),\" because of the need to handle large amount of files. In fact, VS Code uses \",(0,n.jsx)(e.code,{children:\"position: absolute; left: Xpx; top: Ypx;\"}),\" for positioning and it only renders the visible file items.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modify the nested structure of the file explorer to a flat structure while retaining the same visual appearance.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/file-explorer\",children:\"File Explorer\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var p=M;function f(t){return(0,o.jsx)(p,{})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,Object.assign({},t,{children:(0,o.jsx)(f,t)})):f(t)}var _=D;return j(q);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},d=(t,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!y.call(t,r)&&r!==i&&s(t,r,{get:()=>e[r],enumerable:!(l=g(e,r))||l.enumerable});return t};var c=(t,e,i)=>(i=t!=null?m(b(t)):{},d(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),j=t=>d(s({},\"__esModule\",{value:!0}),t);var a=w((C,u)=>{u.exports=_jsx_runtime});var q={};v(q,{default:()=>_});var o=c(a());var n=c(a());function h(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",pre:\"pre\",code:\"code\",h2:\"h2\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is a follow up to the \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/file-explorer\",children:\"File Explorer\"}),\" question, you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/file-explorer\",children:\"File Explorer\"}),\", we built a functional file explorer component that displays an array of file objects in a hierarchical tree format using a nested DOM structure.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"The other possible structure is having a single flat list of items and add the right amount of padding for descendant items. While recursing, the current level will need to be passed as an argument so that the descendant items know what how much padding to render.\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<!-- The bullets will have to be hidden as \n they will still be flushed to the left. -->\n<ul>\n  <li>docs</li>\n  <li style=\"padding-left: 16px\">foo.md</li>\n  <li style=\"padding-left: 16px\">bar.md</li>\n  <li>README.md</li>\n</ul>\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"A single flat list of DOM elements is easier to traverse. Also, this flat approach provides the most control over the rendering and allows for virtualized items in large directories that contain many files. Virtualization is not easy to achieve using a nested structure because in order for items to be indented by the right amount, their parents have to be rendered as well \\u2013 a nested structure makes it hard or even impossible to render only the minimal items that need to be displayed.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This flat approach is used by \",(0,n.jsx)(e.a,{href:\"https://github.dev/yangshun/top-javascript-interview-questions/\",children:\"VS Code\"}),\" because of the need to handle large amount of files. In fact, VS Code uses \",(0,n.jsx)(e.code,{children:\"position: absolute; left: Xpx; top: Ypx;\"}),\" for positioning and it only renders the visible file items.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modify the nested structure of the file explorer to a flat structure while retaining the same visual appearance.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/file-explorer\",children:\"File Explorer\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var p=M;function f(t){return(0,o.jsx)(p,{})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,Object.assign({},t,{children:(0,o.jsx)(f,t)})):f(t)}var _=D;return j(q);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/file-explorer/metadata.json b/apps/web/src/__generated__/questions/user-interface/file-explorer/metadata.json
index bc13b959c..f655fb68e 100644
--- a/apps/web/src/__generated__/questions/user-interface/file-explorer/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/file-explorer/metadata.json
@@ -38,5 +38,7 @@
   "slug": "file-explorer",
   "subtitle": null,
   "title": "File Explorer",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/file-explorer/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/file-explorer/react/skeleton.json
index 6e6135758..222210a03 100644
--- a/apps/web/src/__generated__/questions/user-interface/file-explorer/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/file-explorer/react/skeleton.json
@@ -29,5 +29,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var f=Object.create;var a=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var j=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),D=(i,e)=>{for(var t in e)a(i,t,{get:e[t],enumerable:!0})},s=(i,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of y(e))!b.call(i,r)&&r!==t&&a(i,r,{get:()=>e[r],enumerable:!(c=x(e,r))||c.enumerable});return i};var d=(i,e,t)=>(t=i!=null?f(g(i)):{},s(e||!i||!i.__esModule?a(t,\"default\",{value:i,enumerable:!0}):t,i)),w=i=>s(a({},\"__esModule\",{value:!0}),i);var o=j((v,h)=>{h.exports=_jsx_runtime});var k={};D(k,{default:()=>M});var l=d(o());var n=d(o());function m(i){let e=Object.assign({p:\"p\",ol:\"ol\",li:\"li\",h2:\"h2\",ul:\"ul\",pre:\"pre\",code:\"code\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Given an array of file objects, build a component that displays them in a hierarchical tree format.\"}),`\n`,(0,n.jsx)(e.p,{children:\"There are two types of objects \\u2013 files and directories:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Files are essentially leaf nodes of the tree, they do not have children.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Directories can contain other objects \\u2013 either files or directories.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"You may assume that the IDs and names within the same directory are unique.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The names of the directories/files should be displayed.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Directories\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Contents of the directory should be displayed in a manner that indicates it belongs within the directory. The recommended approach is to indent the contents to the right.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Directories can be expanded and collapsed. Clicking on a directory should toggle its expanded/collapsed state.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Directories should appear before files. All the items should be sorted alphabetically within their respective categories.\"}),`\n`,(0,n.jsx)(e.li,{children:\"You may style the expand/collapse functionality in a way you prefer as long as it is clear that the item is a directory and whether it is in the expanded or collapsed state.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Directories can be empty.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Files\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Files are not expandable and cannot be interacted with.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.li,{children:\"The focus of the exercise is on the functionality and not the styling.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Data format\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-ts\",children:`interface FileObject {\n  id: number;\n  name: string;\n  children?: FileObject[];\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Example data:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const fileData = [\n  {\n    id: 1,\n    name: 'README.md',\n  },\n  {\n    id: 2,\n    name: 'Documents',\n    children: [\n      {\n        id: 3,\n        name: 'Word.doc',\n      },\n      {\n        id: 4,\n        name: 'Powerpoint.ppt',\n      },\n    ],\n  },\n];\n`})})]})}function _(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(m,i)})):m(i)}var p=_;function u(i){return(0,l.jsx)(p,{})}function F(i={}){let{wrapper:e}=i.components||{};return e?(0,l.jsx)(e,Object.assign({},i,{children:(0,l.jsx)(u,i)})):u(i)}var M=F;return w(k);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var f=Object.create;var a=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var j=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),D=(i,e)=>{for(var t in e)a(i,t,{get:e[t],enumerable:!0})},s=(i,e,t,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of y(e))!b.call(i,r)&&r!==t&&a(i,r,{get:()=>e[r],enumerable:!(c=x(e,r))||c.enumerable});return i};var d=(i,e,t)=>(t=i!=null?f(g(i)):{},s(e||!i||!i.__esModule?a(t,\"default\",{value:i,enumerable:!0}):t,i)),w=i=>s(a({},\"__esModule\",{value:!0}),i);var o=j((v,h)=>{h.exports=_jsx_runtime});var k={};D(k,{default:()=>M});var l=d(o());var n=d(o());function p(i){let e=Object.assign({p:\"p\",ol:\"ol\",li:\"li\",h2:\"h2\",ul:\"ul\",pre:\"pre\",code:\"code\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Given an array of file objects, build a component that displays them in a hierarchical tree format.\"}),`\n`,(0,n.jsx)(e.p,{children:\"There are two types of objects \\u2013 files and directories:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Files are essentially leaf nodes of the tree, they do not have children.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Directories can contain other objects \\u2013 either files or directories.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"You may assume that the IDs and names within the same directory are unique.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The names of the directories/files should be displayed.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Directories\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Contents of the directory should be displayed in a manner that indicates it belongs within the directory. The recommended approach is to indent the contents to the right.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Directories can be expanded and collapsed. Clicking on a directory should toggle its expanded/collapsed state.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Directories should appear before files. All the items should be sorted alphabetically within their respective categories.\"}),`\n`,(0,n.jsx)(e.li,{children:\"You may style the expand/collapse functionality in a way you prefer as long as it is clear that the item is a directory and whether it is in the expanded or collapsed state.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Directories can be empty.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Files\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Files are not expandable and cannot be interacted with.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.li,{children:\"The focus of the exercise is on the functionality and not the styling.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Data format\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-ts\",children:`interface FileObject {\n  id: number;\n  name: string;\n  children?: FileObject[];\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"Example data:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const fileData = [\n  {\n    id: 1,\n    name: 'README.md',\n  },\n  {\n    id: 2,\n    name: 'Documents',\n    children: [\n      {\n        id: 3,\n        name: 'Word.doc',\n      },\n      {\n        id: 4,\n        name: 'Powerpoint.ppt',\n      },\n    ],\n  },\n];\n`})})]})}function _(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(p,i)})):p(i)}var m=_;function u(i){return(0,l.jsx)(m,{})}function F(i={}){let{wrapper:e}=i.components||{};return e?(0,l.jsx)(e,Object.assign({},i,{children:(0,l.jsx)(u,i)})):u(i)}var M=F;return w(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/flight-booker/angular/skeleton.json b/apps/web/src/__generated__/questions/user-interface/flight-booker/angular/skeleton.json
index aa80ae2ca..ef7f1175e 100644
--- a/apps/web/src/__generated__/questions/user-interface/flight-booker/angular/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/flight-booker/angular/skeleton.json
@@ -47,5 +47,5 @@
     "activeFile": "/src/app/app.component.ts",
     "environment": "angular-cli"
   },
-  "writeup": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var Y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},h=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!w.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var d=(t,e,i)=>(i=t!=null?g(x(t)):{},h(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),D=t=>h(o({},\"__esModule\",{value:!0}),t);var s=Y((R,c)=>{c.exports=_jsx_runtime});var _={};y(_,{default:()=>j});var l=d(s());var n=d(s());function u(t){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a component that books a one-way or return flight for specified dates.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'The user can choose from two flight options: \"One-way flight\" and \"Return flight\".'}),`\n`,(0,n.jsxs)(e.li,{children:[\"Input date fields\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The date input fields represent the departure date and return dates.\"}),`\n`,(0,n.jsx)(e.li,{children:'The return date input is displayed if the \"Return flight\" option is chosen, hidden otherwise.'}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Form validation should be done upon submission for invalid fields:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Dates are in the past.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Return date is before the departure date.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Upon successful submission, a message is displayed informing the user of the selection:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'One-way flight: \"You have booked a one-way flight on YYYY-MM-DD\"'}),`\n`,(0,n.jsx)(e.li,{children:'Return-flight \"You have booked a return flight, departing on YYYY-MM-DD and returning on YYYY-MM-DD\"'}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`Here's an example of the component, with both \"One-way flight\" and \"Return flight\" options.`}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/flight-booker/flight-booker-example.png\",alt:\"Flight booker example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Resources\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\",children:[(0,n.jsx)(e.code,{children:'<input type=\"date\">'}),\" element\"]}),\" would be helpful for the date input fields.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is modified from \",(0,n.jsx)(e.a,{href:\"https://7guis.github.io/7guis/tasks#flight\",children:\"7GUIs Flight Booker\"}),\".\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var f=M;function p(t){return(0,l.jsx)(f,{})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,Object.assign({},t,{children:(0,l.jsx)(p,t)})):p(t)}var j=k;return D(_);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Y=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},h=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!w.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var d=(t,e,i)=>(i=t!=null?g(x(t)):{},h(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),D=t=>h(o({},\"__esModule\",{value:!0}),t);var s=y((R,c)=>{c.exports=_jsx_runtime});var _={};Y(_,{default:()=>j});var l=d(s());var n=d(s());function u(t){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a component that books a one-way or return flight for specified dates.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'The user can choose from two flight options: \"One-way flight\" and \"Return flight\".'}),`\n`,(0,n.jsxs)(e.li,{children:[\"Input date fields\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The date input fields represent the departure date and return dates.\"}),`\n`,(0,n.jsx)(e.li,{children:'The return date input is displayed if the \"Return flight\" option is chosen, hidden otherwise.'}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Form validation should be done upon submission for invalid fields:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Dates are in the past.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Return date is before the departure date.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Upon successful submission, a message is displayed informing the user of the selection:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'One-way flight: \"You have booked a one-way flight on YYYY-MM-DD\"'}),`\n`,(0,n.jsx)(e.li,{children:'Return-flight \"You have booked a return flight, departing on YYYY-MM-DD and returning on YYYY-MM-DD\"'}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`Here's an example of the component, with both \"One-way flight\" and \"Return flight\" options.`}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/flight-booker/flight-booker-example.png\",alt:\"Flight booker example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Resources\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\",children:[(0,n.jsx)(e.code,{children:'<input type=\"date\">'}),\" element\"]}),\" would be helpful for the date input fields.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is modified from \",(0,n.jsx)(e.a,{href:\"https://7guis.github.io/7guis/tasks#flight\",children:\"7GUIs Flight Booker\"}),\".\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var f=M;function p(t){return(0,l.jsx)(f,{})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,Object.assign({},t,{children:(0,l.jsx)(p,t)})):p(t)}var j=k;return D(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/flight-booker/metadata.json b/apps/web/src/__generated__/questions/user-interface/flight-booker/metadata.json
index 33b725411..e9a9ab55a 100644
--- a/apps/web/src/__generated__/questions/user-interface/flight-booker/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/flight-booker/metadata.json
@@ -14,6 +14,10 @@
       "framework": "react",
       "href": "/questions/user-interface/flight-booker/react"
     },
+    {
+      "framework": "vanilla",
+      "href": "/questions/user-interface/flight-booker/vanilla"
+    },
     {
       "framework": "angular",
       "href": "/questions/user-interface/flight-booker/angular"
@@ -40,5 +44,7 @@
   "slug": "flight-booker",
   "subtitle": null,
   "title": "Flight Booker",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/flight-booker/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/flight-booker/react/skeleton.json
index d14048ee8..16796d4cd 100644
--- a/apps/web/src/__generated__/questions/user-interface/flight-booker/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/flight-booker/react/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var Y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},h=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!w.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var d=(t,e,i)=>(i=t!=null?g(x(t)):{},h(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),D=t=>h(o({},\"__esModule\",{value:!0}),t);var s=Y((R,c)=>{c.exports=_jsx_runtime});var _={};y(_,{default:()=>j});var l=d(s());var n=d(s());function u(t){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a component that books a one-way or return flight for specified dates.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'The user can choose from two flight options: \"One-way flight\" and \"Return flight\".'}),`\n`,(0,n.jsxs)(e.li,{children:[\"Input date fields\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The date input fields represent the departure date and return dates.\"}),`\n`,(0,n.jsx)(e.li,{children:'The return date input is displayed if the \"Return flight\" option is chosen, hidden otherwise.'}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Form validation should be done upon submission for invalid fields:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Dates are in the past.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Return date is before the departure date.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Upon successful submission, a message is displayed informing the user of the selection:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'One-way flight: \"You have booked a one-way flight on YYYY-MM-DD\"'}),`\n`,(0,n.jsx)(e.li,{children:'Return-flight \"You have booked a return flight, departing on YYYY-MM-DD and returning on YYYY-MM-DD\"'}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`Here's an example of the component, with both \"One-way flight\" and \"Return flight\" options.`}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/flight-booker/flight-booker-example.png\",alt:\"Flight booker example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Resources\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\",children:[(0,n.jsx)(e.code,{children:'<input type=\"date\">'}),\" element\"]}),\" would be helpful for the date input fields.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is modified from \",(0,n.jsx)(e.a,{href:\"https://7guis.github.io/7guis/tasks#flight\",children:\"7GUIs Flight Booker\"}),\".\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var f=M;function p(t){return(0,l.jsx)(f,{})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,Object.assign({},t,{children:(0,l.jsx)(p,t)})):p(t)}var j=k;return D(_);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Y=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},h=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!w.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var d=(t,e,i)=>(i=t!=null?g(x(t)):{},h(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),D=t=>h(o({},\"__esModule\",{value:!0}),t);var s=y((R,c)=>{c.exports=_jsx_runtime});var _={};Y(_,{default:()=>j});var l=d(s());var n=d(s());function u(t){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a component that books a one-way or return flight for specified dates.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'The user can choose from two flight options: \"One-way flight\" and \"Return flight\".'}),`\n`,(0,n.jsxs)(e.li,{children:[\"Input date fields\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The date input fields represent the departure date and return dates.\"}),`\n`,(0,n.jsx)(e.li,{children:'The return date input is displayed if the \"Return flight\" option is chosen, hidden otherwise.'}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Form validation should be done upon submission for invalid fields:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Dates are in the past.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Return date is before the departure date.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Upon successful submission, a message is displayed informing the user of the selection:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'One-way flight: \"You have booked a one-way flight on YYYY-MM-DD\"'}),`\n`,(0,n.jsx)(e.li,{children:'Return-flight \"You have booked a return flight, departing on YYYY-MM-DD and returning on YYYY-MM-DD\"'}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`Here's an example of the component, with both \"One-way flight\" and \"Return flight\" options.`}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/flight-booker/flight-booker-example.png\",alt:\"Flight booker example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Resources\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\",children:[(0,n.jsx)(e.code,{children:'<input type=\"date\">'}),\" element\"]}),\" would be helpful for the date input fields.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is modified from \",(0,n.jsx)(e.a,{href:\"https://7guis.github.io/7guis/tasks#flight\",children:\"7GUIs Flight Booker\"}),\".\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var f=M;function p(t){return(0,l.jsx)(f,{})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,Object.assign({},t,{children:(0,l.jsx)(p,t)})):p(t)}var j=k;return D(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/flight-booker/svelte/skeleton.json b/apps/web/src/__generated__/questions/user-interface/flight-booker/svelte/skeleton.json
index 0eb3401a4..aa40e2a8b 100644
--- a/apps/web/src/__generated__/questions/user-interface/flight-booker/svelte/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/flight-booker/svelte/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var Y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},h=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!w.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var d=(t,e,i)=>(i=t!=null?g(x(t)):{},h(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),D=t=>h(o({},\"__esModule\",{value:!0}),t);var s=Y((R,c)=>{c.exports=_jsx_runtime});var _={};y(_,{default:()=>j});var l=d(s());var n=d(s());function u(t){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a component that books a one-way or return flight for specified dates.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'The user can choose from two flight options: \"One-way flight\" and \"Return flight\".'}),`\n`,(0,n.jsxs)(e.li,{children:[\"Input date fields\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The date input fields represent the departure date and return dates.\"}),`\n`,(0,n.jsx)(e.li,{children:'The return date input is displayed if the \"Return flight\" option is chosen, hidden otherwise.'}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Form validation should be done upon submission for invalid fields:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Dates are in the past.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Return date is before the departure date.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Upon successful submission, a message is displayed informing the user of the selection:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'One-way flight: \"You have booked a one-way flight on YYYY-MM-DD\"'}),`\n`,(0,n.jsx)(e.li,{children:'Return-flight \"You have booked a return flight, departing on YYYY-MM-DD and returning on YYYY-MM-DD\"'}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`Here's an example of the component, with both \"One-way flight\" and \"Return flight\" options.`}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/flight-booker/flight-booker-example.png\",alt:\"Flight booker example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Resources\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\",children:[(0,n.jsx)(e.code,{children:'<input type=\"date\">'}),\" element\"]}),\" would be helpful for the date input fields.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is modified from \",(0,n.jsx)(e.a,{href:\"https://7guis.github.io/7guis/tasks#flight\",children:\"7GUIs Flight Booker\"}),\".\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var f=M;function p(t){return(0,l.jsx)(f,{})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,Object.assign({},t,{children:(0,l.jsx)(p,t)})):p(t)}var j=k;return D(_);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Y=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},h=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!w.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var d=(t,e,i)=>(i=t!=null?g(x(t)):{},h(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),D=t=>h(o({},\"__esModule\",{value:!0}),t);var s=y((R,c)=>{c.exports=_jsx_runtime});var _={};Y(_,{default:()=>j});var l=d(s());var n=d(s());function u(t){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a component that books a one-way or return flight for specified dates.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'The user can choose from two flight options: \"One-way flight\" and \"Return flight\".'}),`\n`,(0,n.jsxs)(e.li,{children:[\"Input date fields\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The date input fields represent the departure date and return dates.\"}),`\n`,(0,n.jsx)(e.li,{children:'The return date input is displayed if the \"Return flight\" option is chosen, hidden otherwise.'}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Form validation should be done upon submission for invalid fields:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Dates are in the past.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Return date is before the departure date.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Upon successful submission, a message is displayed informing the user of the selection:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'One-way flight: \"You have booked a one-way flight on YYYY-MM-DD\"'}),`\n`,(0,n.jsx)(e.li,{children:'Return-flight \"You have booked a return flight, departing on YYYY-MM-DD and returning on YYYY-MM-DD\"'}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`Here's an example of the component, with both \"One-way flight\" and \"Return flight\" options.`}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/flight-booker/flight-booker-example.png\",alt:\"Flight booker example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Resources\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\",children:[(0,n.jsx)(e.code,{children:'<input type=\"date\">'}),\" element\"]}),\" would be helpful for the date input fields.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is modified from \",(0,n.jsx)(e.a,{href:\"https://7guis.github.io/7guis/tasks#flight\",children:\"7GUIs Flight Booker\"}),\".\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var f=M;function p(t){return(0,l.jsx)(f,{})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,Object.assign({},t,{children:(0,l.jsx)(p,t)})):p(t)}var j=k;return D(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/flight-booker/vue/skeleton.json b/apps/web/src/__generated__/questions/user-interface/flight-booker/vue/skeleton.json
index b2870deea..2781dfece 100644
--- a/apps/web/src/__generated__/questions/user-interface/flight-booker/vue/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/flight-booker/vue/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.vue",
     "environment": "vue-cli"
   },
-  "writeup": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var Y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},h=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!w.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var d=(t,e,i)=>(i=t!=null?g(x(t)):{},h(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),D=t=>h(o({},\"__esModule\",{value:!0}),t);var s=Y((R,c)=>{c.exports=_jsx_runtime});var _={};y(_,{default:()=>j});var l=d(s());var n=d(s());function u(t){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a component that books a one-way or return flight for specified dates.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'The user can choose from two flight options: \"One-way flight\" and \"Return flight\".'}),`\n`,(0,n.jsxs)(e.li,{children:[\"Input date fields\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The date input fields represent the departure date and return dates.\"}),`\n`,(0,n.jsx)(e.li,{children:'The return date input is displayed if the \"Return flight\" option is chosen, hidden otherwise.'}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Form validation should be done upon submission for invalid fields:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Dates are in the past.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Return date is before the departure date.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Upon successful submission, a message is displayed informing the user of the selection:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'One-way flight: \"You have booked a one-way flight on YYYY-MM-DD\"'}),`\n`,(0,n.jsx)(e.li,{children:'Return-flight \"You have booked a return flight, departing on YYYY-MM-DD and returning on YYYY-MM-DD\"'}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`Here's an example of the component, with both \"One-way flight\" and \"Return flight\" options.`}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/flight-booker/flight-booker-example.png\",alt:\"Flight booker example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Resources\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\",children:[(0,n.jsx)(e.code,{children:'<input type=\"date\">'}),\" element\"]}),\" would be helpful for the date input fields.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is modified from \",(0,n.jsx)(e.a,{href:\"https://7guis.github.io/7guis/tasks#flight\",children:\"7GUIs Flight Booker\"}),\".\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var f=M;function p(t){return(0,l.jsx)(f,{})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,Object.assign({},t,{children:(0,l.jsx)(p,t)})):p(t)}var j=k;return D(_);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Y=(t,e)=>{for(var i in e)o(t,i,{get:e[i],enumerable:!0})},h=(t,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!w.call(t,r)&&r!==i&&o(t,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return t};var d=(t,e,i)=>(i=t!=null?g(x(t)):{},h(e||!t||!t.__esModule?o(i,\"default\",{value:t,enumerable:!0}):i,t)),D=t=>h(o({},\"__esModule\",{value:!0}),t);var s=y((R,c)=>{c.exports=_jsx_runtime});var _={};Y(_,{default:()=>j});var l=d(s());var n=d(s());function u(t){let e=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\",a:\"a\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a component that books a one-way or return flight for specified dates.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'The user can choose from two flight options: \"One-way flight\" and \"Return flight\".'}),`\n`,(0,n.jsxs)(e.li,{children:[\"Input date fields\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The date input fields represent the departure date and return dates.\"}),`\n`,(0,n.jsx)(e.li,{children:'The return date input is displayed if the \"Return flight\" option is chosen, hidden otherwise.'}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Form validation should be done upon submission for invalid fields:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Dates are in the past.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Return date is before the departure date.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Upon successful submission, a message is displayed informing the user of the selection:\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'One-way flight: \"You have booked a one-way flight on YYYY-MM-DD\"'}),`\n`,(0,n.jsx)(e.li,{children:'Return-flight \"You have booked a return flight, departing on YYYY-MM-DD and returning on YYYY-MM-DD\"'}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`Here's an example of the component, with both \"One-way flight\" and \"Return flight\" options.`}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/flight-booker/flight-booker-example.png\",alt:\"Flight booker example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Resources\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\",children:[(0,n.jsx)(e.code,{children:'<input type=\"date\">'}),\" element\"]}),\" would be helpful for the date input fields.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is modified from \",(0,n.jsx)(e.a,{href:\"https://7guis.github.io/7guis/tasks#flight\",children:\"7GUIs Flight Booker\"}),\".\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var f=M;function p(t){return(0,l.jsx)(f,{})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,Object.assign({},t,{children:(0,l.jsx)(p,t)})):p(t)}var j=k;return D(_);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/grid-lights/metadata.json b/apps/web/src/__generated__/questions/user-interface/grid-lights/metadata.json
index c92947248..9e7bfe2ee 100644
--- a/apps/web/src/__generated__/questions/user-interface/grid-lights/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/grid-lights/metadata.json
@@ -43,5 +43,8 @@
   "slug": "grid-lights",
   "subtitle": null,
   "title": "Grid Lights",
-  "topics": []
+  "topics": [
+    "a11y",
+    "async"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/metadata.json b/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/metadata.json
index 5d4b29c15..3800d9779 100644
--- a/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/metadata.json
@@ -39,5 +39,7 @@
   "slug": "image-carousel-ii",
   "subtitle": null,
   "title": "Image Carousel II",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/react/skeleton.json
index ac3120208..384c7aa54 100644
--- a/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/react/skeleton.json
@@ -32,5 +32,5 @@
     "activeFile": "/src/ImageCarousel.tsx",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var f=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),q=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},u=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of x(e))!w.call(t,i)&&i!==o&&s(t,i,{get:()=>e[i],enumerable:!(l=p(e,i))||l.enumerable});return t};var c=(t,e,o)=>(o=t!=null?f(b(t)):{},u(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>u(s({},\"__esModule\",{value:!0}),t);var a=y((M,h)=>{h.exports=_jsx_runtime});var D={};q(D,{default:()=>v});var r=c(a());var n=c(a());function m(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is a follow up to the \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/image-carousel\",children:\"Image Carousel\"}),\" question, you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Build an image carousel that displays a sequence of images, smoothly transitioning when navigating between images.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"All requirements of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/image-carousel\",children:\"Image Carousel\"}),\" question should be supported.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Upon clicking the Prev/Next buttons, the current image should smoothly translate out while the next image enters. Translation direction is left/right respectively.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Transitions when clicking on the page buttons is optional but highly encouraged. Aim to reuse the transitioning code for the Prev/Next buttons.\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Recommendation\"}),\": Render all the images in a horizontal row within a container and manipulate the horizontal offset of the container to achieve the transitions.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:'Click on the \"See what you are building\" button to see a preview of the result.'}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/image-carousel\",children:\"Image Carousel\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function _(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(m,t)})):m(t)}var d=_;function g(t){return(0,r.jsx)(d,{})}function C(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(g,t)})):g(t)}var v=C;return j(D);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),q=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},u=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of x(e))!w.call(t,i)&&i!==o&&s(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var c=(t,e,o)=>(o=t!=null?p(b(t)):{},u(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>u(s({},\"__esModule\",{value:!0}),t);var a=y((M,h)=>{h.exports=_jsx_runtime});var D={};q(D,{default:()=>v});var r=c(a());var n=c(a());function m(t){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Note:\"}),\" This is a follow up to the \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/image-carousel\",children:\"Image Carousel\"}),\" question, you should complete that question first before attempting this question.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Build an image carousel that displays a sequence of images, smoothly transitioning when navigating between images.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"All requirements of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/image-carousel\",children:\"Image Carousel\"}),\" question should be supported.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Upon clicking the Prev/Next buttons, the current image should smoothly translate out while the next image enters. Translation direction is left/right respectively.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Transitions when clicking on the page buttons is optional but highly encouraged. Aim to reuse the transitioning code for the Prev/Next buttons.\"}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Recommendation\"}),\": Render all the images in a horizontal row within a container and manipulate the horizontal offset of the container to achieve the transitions.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:'Click on the \"See what you are building\" button to see a preview of the result.'}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The skeleton code uses the solution of \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/image-carousel\",children:\"Image Carousel\"}),\", but you are free to use your own solution as a starting point.\"]})]})}function _(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(m,t)})):m(t)}var d=_;function g(t){return(0,r.jsx)(d,{})}function C(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(g,t)})):g(t)}var v=C;return j(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/react/solution.json b/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/react/solution.json
index b66c6c558..6b1a69422 100644
--- a/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/react/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/image-carousel-ii/react/solution.json
@@ -32,5 +32,5 @@
     "activeFile": "/src/ImageCarousel.tsx",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var x=Object.create;var l=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var z=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),T=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of _(e))!S.call(t,s)&&s!==r&&l(t,s,{get:()=>e[s],enumerable:!(d=j(e,s))||d.enumerable});return t};var c=(t,e,r)=>(r=t!=null?x(C(t)):{},m(e||!t||!t.__esModule?l(r,\"default\",{value:t,enumerable:!0}):r,t)),O=t=>m(l({},\"__esModule\",{value:!0}),t);var h=z((k,g)=>{g.exports=_jsx_runtime});var A={};T(A,{default:()=>I});var o=c(h());var n=c(h());function u(t){let e=Object.assign({h2:\"h2\",h3:\"h3\",p:\"p\",h4:\"h4\",code:\"code\",a:\"a\",pre:\"pre\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",ol:\"ol\",li:\"li\",strong:\"strong\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Structure\"}),`\n`,(0,n.jsx)(e.p,{children:\"One of the easiest way to implement an image carousel is rendering all the images in a horizontal fashion within a container (the images will overflow horizontally) and changing the horizontal offset.\"}),`\n`,(0,n.jsx)(e.p,{children:\"With this structure, navigating between images can be done in two ways: (1) changing the container's scroll position and (2) CSS transforms on the container.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"1. Scroll position\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"By placing the images in a row and restricting the container to be the same size as the image carousel dimensions, the images will take up a longer horizontal space than the container and to view the various images, the \",(0,n.jsx)(e.code,{children:\"scrollOffset\"}),\" of the container can be modified. Combined with the \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap\",children:\"CSS scroll snap\"}),\" property, touchpad and touchscreen users can scroll/swipe through the images horizontally. This method doesn't involve JavaScript at all and is highly recommended if all you need is a basic horizontal image carousel.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To support pagination button interactions, you can programmatically set the scroll position by using the \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll\",children:[(0,n.jsx)(e.code,{children:\"Element.scroll()\"}),\" method\"]}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`containerEl.scroll({\n  left: 100, // Calculate this offset value based on size of the image.\n  behavior: 'smooth', // Smooth transitions for free!\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"2. CSS transforms\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The other way to change the displayed image is to add \",(0,n.jsx)(e.code,{children:\"transform: translateX(100px)\"}),\" on the container. The value to translate by depends on the size of the image. The solution implements this method since it is slightly more complex to implement and provides more learning value.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Determining how much to scroll/translate by\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using this offset technique, for the various images:\"}),`\n`,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:\"Image no.\"}),(0,n.jsx)(e.th,{children:\"Offset\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"1\"}),(0,n.jsx)(e.td,{children:\"0\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"2\"}),(0,n.jsx)(e.td,{children:\"One image width\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"3\"}),(0,n.jsx)(e.td,{children:\"Two image width\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"4\"}),(0,n.jsx)(e.td,{children:\"Three image width\"})]})]})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Observe that the offset can be determined with \",(0,n.jsx)(e.code,{children:\"(index - 1) * imageWidth\"}),\". However, because the images have a dynamic width (when the screen is narrower than 600px), the image width value is not available ahead of time and has to be calculated during runtime.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"We can obtain a reference to the image carousel's root element and use \",(0,n.jsx)(e.code,{children:\"el.getBoundingClientRect().width\"}),\" to get an image's width.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Transitions\"}),`\n`,(0,n.jsx)(e.p,{children:\"With the CSS transform method, transitions can be easily enabled by the following CSS:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`transition: transform 0.5s linear;\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Just by setting the \",(0,n.jsx)(e.code,{children:\"transform\"}),\" property to a new \",(0,n.jsx)(e.code,{children:\"translateX()\"}),\" value, the browser will transition the container smoothly to the new position, displaying the new image.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Resizing\"}),`\n`,(0,n.jsx)(e.p,{children:\"One issue with using an offset-based approach for transitions is that if the width of the image carousel changes, the current offset (which is based on the image dimensions) will no longer be accurate.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Therefore we need to listen for window \",(0,n.jsx)(e.code,{children:\"resize\"}),\" events and make the \",(0,n.jsx)(e.code,{children:\"imageWidth\"}),\" as part of the component state, so that the component updates the offset if/when the \",(0,n.jsx)(e.code,{children:\"imageWidth\"}),\" changes.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the \",(0,n.jsx)(e.code,{children:\"transition\"}),\" styles are permanently on the image container, when the offset changes due to resizing, some transition will be seen and looks a little odd. Hence the \",(0,n.jsx)(e.code,{children:\"transition\"}),\" styles should only be added when offset changes due to navigation events and not resizing.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Downsides of an offset-based approach\"}),`\n`,(0,n.jsx)(e.p,{children:\"The offset-based approach was relatively easy to implement. You should also be aware of the downsides of this approach:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Larger DOM footprint\"}),\": All the images are present in the DOM from the get-go. If there are many images, it could result in poor performance. This can be mitigated with list virtualization and/or lazy loading of images.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transition distance can be huge\"}),\": Transitioning from the first image to the last image or vice-versa (more generally speaking, across multiple images) can be a jarring experience because the browser will scroll through all the intermediate images.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Follow up\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"There are many ways to implement image carousels, each with its own advantages and limitations. \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/image-carousel-iii\",children:\"Image Carousel III\"}),\" explores a different, more performant approach, where only the current image and next image is rendered into the DOM and addresses some of the downsides of the offset-based approach.\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=M;var a=c(h());function f(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},t.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Ensure test cases for basic navigation still pass.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Click the navigation buttons in rapid succession (while the transition is ongoing) and check that no unexpected behavior occurs.\"}),`\n`]})]})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var b=D;var i=c(h());function w(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",strong:\"strong\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Accessibility (A11y)\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"All images should have \",(0,i.jsx)(e.code,{children:\"alt\"}),\" text that describes the image to support accessibility. It will be read out loud by screen readers and is also used by search engines.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Add appropriate \",(0,i.jsx)(e.code,{children:\"aria-label\"}),\"s to the buttons since the buttons do not have visible labels.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"[Not implemented]\"}),\": Add a screen-reader-only element with the \",(0,i.jsx)(e.code,{children:'aria-live=\"polite\"'}),\" attribute and \",(0,i.jsx)(e.code,{children:\"alt\"}),\" text of the new image as contents. This instructs screen readers to announce that a new image is displayed.\"]}),`\n`]})]})}function X(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(w,t)})):w(t)}var y=X;function v(t){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(p,{}),`\n`,(0,o.jsx)(b,{}),`\n`,(0,o.jsx)(y,{})]})}function F(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,Object.assign({},t,{children:(0,o.jsx)(v,t)})):v(t)}var I=F;return O(A);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var x=Object.create;var l=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var z=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),T=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of _(e))!S.call(t,s)&&s!==r&&l(t,s,{get:()=>e[s],enumerable:!(d=j(e,s))||d.enumerable});return t};var c=(t,e,r)=>(r=t!=null?x(C(t)):{},m(e||!t||!t.__esModule?l(r,\"default\",{value:t,enumerable:!0}):r,t)),O=t=>m(l({},\"__esModule\",{value:!0}),t);var h=z((k,g)=>{g.exports=_jsx_runtime});var W={};T(W,{default:()=>I});var o=c(h());var n=c(h());function u(t){let e=Object.assign({h2:\"h2\",h3:\"h3\",p:\"p\",h4:\"h4\",code:\"code\",a:\"a\",pre:\"pre\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\",ol:\"ol\",li:\"li\",strong:\"strong\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Structure\"}),`\n`,(0,n.jsx)(e.p,{children:\"One of the easiest way to implement an image carousel is rendering all the images in a horizontal fashion within a container (the images will overflow horizontally) and changing the horizontal offset.\"}),`\n`,(0,n.jsx)(e.p,{children:\"With this structure, navigating between images can be done in two ways: (1) changing the container's scroll position and (2) CSS transforms on the container.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"1. Scroll position\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"By placing the images in a row and restricting the container to be the same size as the image carousel dimensions, the images will take up a longer horizontal space than the container and to view the various images, the \",(0,n.jsx)(e.code,{children:\"scrollOffset\"}),\" of the container can be modified. Combined with the \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap\",children:\"CSS scroll snap\"}),\" property, touchpad and touchscreen users can scroll/swipe through the images horizontally. This method doesn't involve JavaScript at all and is highly recommended if all you need is a basic horizontal image carousel.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To support pagination button interactions, you can programmatically set the scroll position by using the \",(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll\",children:[(0,n.jsx)(e.code,{children:\"Element.scroll()\"}),\" method\"]}),\".\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`containerEl.scroll({\n  left: 100, // Calculate this offset value based on size of the image.\n  behavior: 'smooth', // Smooth transitions for free!\n});\n`})}),`\n`,(0,n.jsx)(e.h4,{children:\"2. CSS transforms\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The other way to change the displayed image is to add \",(0,n.jsx)(e.code,{children:\"transform: translateX(100px)\"}),\" on the container. The value to translate by depends on the size of the image. The solution implements this method since it is slightly more complex to implement and provides more learning value.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"Determining how much to scroll/translate by\"}),`\n`,(0,n.jsx)(e.p,{children:\"Using this offset technique, for the various images:\"}),`\n`,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:\"Image no.\"}),(0,n.jsx)(e.th,{children:\"Offset\"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"1\"}),(0,n.jsx)(e.td,{children:\"0\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"2\"}),(0,n.jsx)(e.td,{children:\"One image width\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"3\"}),(0,n.jsx)(e.td,{children:\"Two image width\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"4\"}),(0,n.jsx)(e.td,{children:\"Three image width\"})]})]})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Observe that the offset can be determined with \",(0,n.jsx)(e.code,{children:\"(index - 1) * imageWidth\"}),\". However, because the images have a dynamic width (when the screen is narrower than 600px), the image width value is not available ahead of time and has to be calculated during runtime.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"We can obtain a reference to the image carousel's root element and use \",(0,n.jsx)(e.code,{children:\"el.getBoundingClientRect().width\"}),\" to get an image's width.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Transitions\"}),`\n`,(0,n.jsx)(e.p,{children:\"With the CSS transform method, transitions can be easily enabled by the following CSS:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`transition: transform 0.5s linear;\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Just by setting the \",(0,n.jsx)(e.code,{children:\"transform\"}),\" property to a new \",(0,n.jsx)(e.code,{children:\"translateX()\"}),\" value, the browser will transition the container smoothly to the new position, displaying the new image.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Resizing\"}),`\n`,(0,n.jsx)(e.p,{children:\"One issue with using an offset-based approach for transitions is that if the width of the image carousel changes, the current offset (which is based on the image dimensions) will no longer be accurate.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Therefore we need to listen for window \",(0,n.jsx)(e.code,{children:\"resize\"}),\" events and make the \",(0,n.jsx)(e.code,{children:\"imageWidth\"}),\" as part of the component state, so that the component updates the offset if/when the \",(0,n.jsx)(e.code,{children:\"imageWidth\"}),\" changes.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the \",(0,n.jsx)(e.code,{children:\"transition\"}),\" styles are permanently on the image container, when the offset changes due to resizing, some transition will be seen and looks a little odd. Hence the \",(0,n.jsx)(e.code,{children:\"transition\"}),\" styles should only be added when offset changes due to navigation events and not resizing.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Downsides of an offset-based approach\"}),`\n`,(0,n.jsx)(e.p,{children:\"The offset-based approach was relatively easy to implement. You should also be aware of the downsides of this approach:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Larger DOM footprint\"}),\": All the images are present in the DOM from the get-go. If there are many images, it could result in poor performance. This can be mitigated with list virtualization and/or lazy loading of images.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transition distance can be huge\"}),\": Transitioning from the first image to the last image or vice-versa (more generally speaking, across multiple images) can be a jarring experience because the browser will scroll through all the intermediate images.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Follow up\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"There are many ways to implement image carousels, each with its own advantages and limitations. \",(0,n.jsx)(e.a,{href:\"/questions/user-interface/image-carousel-iii\",children:\"Image Carousel III\"}),\" explores a different, more performant approach, where only the current image and next image is rendered into the DOM and addresses some of the downsides of the offset-based approach.\"]})]})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=M;var a=c(h());function f(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},t.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Ensure test cases for basic navigation still pass.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Click the navigation buttons in rapid succession (while the transition is ongoing) and check that no unexpected behavior occurs.\"}),`\n`]})]})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(f,t)})):f(t)}var b=D;var i=c(h());function w(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",strong:\"strong\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Accessibility\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"All images should have \",(0,i.jsx)(e.code,{children:\"alt\"}),\" text that describes the image to support accessibility. It will be read out loud by screen readers and is also used by search engines.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Add appropriate \",(0,i.jsx)(e.code,{children:\"aria-label\"}),\"s to the buttons since the buttons do not have visible labels.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"[Not implemented]\"}),\": Add a screen-reader-only element with the \",(0,i.jsx)(e.code,{children:'aria-live=\"polite\"'}),\" attribute and \",(0,i.jsx)(e.code,{children:\"alt\"}),\" text of the new image as contents. This instructs screen readers to announce that a new image is displayed.\"]}),`\n`]})]})}function X(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(w,t)})):w(t)}var y=X;function v(t){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(p,{}),`\n`,(0,o.jsx)(b,{}),`\n`,(0,o.jsx)(y,{})]})}function F(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,Object.assign({},t,{children:(0,o.jsx)(v,t)})):v(t)}var I=F;return O(W);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/image-carousel-iii/react/solution.json b/apps/web/src/__generated__/questions/user-interface/image-carousel-iii/react/solution.json
index c5514ca59..076e1d53c 100644
--- a/apps/web/src/__generated__/questions/user-interface/image-carousel-iii/react/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/image-carousel-iii/react/solution.json
@@ -32,5 +32,5 @@
     "activeFile": "/src/ImageCarousel.tsx",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var x=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),I=(t,e)=>{for(var o in e)d(t,o,{get:e[o],enumerable:!0})},m=(t,e,o,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of k(e))!M.call(t,s)&&s!==o&&d(t,s,{get:()=>e[s],enumerable:!(h=T(e,s))||h.enumerable});return t};var c=(t,e,o)=>(o=t!=null?x(S(t)):{},m(e||!t||!t.__esModule?d(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>m(d({},\"__esModule\",{value:!0}),t);var l=j((H,u)=>{u.exports=_jsx_runtime});var F={};I(F,{default:()=>X});var a=c(l());var n=c(l());function g(t){let e=Object.assign({h2:\"h2\",p:\"p\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\",code:\"code\",strong:\"strong\",pre:\"pre\",ol:\"ol\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"We are able to reuse most of the existing markup for this question. The complexity is in rendering both current + new images, and animating the transitions.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Complexities of CSS transitions\"}),`\n`,(0,n.jsx)(e.p,{children:\"CSS transitions which involve removal of the animated elements at the end can be quite tricky to implement well. The element needs to stay in the DOM for the duration of the transition, then be removed. Removing the element typically requires JavaScript intervention. You need to coordinate the CSS transition duration with the JavaScript timing for element removal, which can lead to synchronization issues.\"}),`\n`,(0,n.jsx)(e.p,{children:\"If a transition is cancelled or interrupted (e.g., by quickly toggling a state), you need to handle these cases gracefully, potentially removing the element immediately or reverting to a different state.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Determining how to handle events on elements that are transitioning out can be tricky. Should they still be interactive? How do you prevent unintended interactions?\"}),`\n`,(0,n.jsx)(e.p,{children:\"It is hard to build transitions that involve entering and leaving the DOM when using declarative UI frameworks because these frameworks render based the UI on the current state. Transitions usually involve displaying both current and new states at the same time, which means your UI code has to include both current + new state values and include the logic for transitioning between them correctly and with the right timing. These can be quite complex to implement correctly after accounting for the scenarios listed above.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Thus, it is common for frameworks to provide abstractions to make implementing animations easier:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"React does not provide any first class abstractions but endorses React-specific animation libraries like \",(0,n.jsx)(e.a,{href:\"https://reactcommunity.org/react-transition-group/\",children:\"React Transition Group\"}),\" and \",(0,n.jsx)(e.a,{href:\"https://framer.com/motion\",children:\"Framer Motion\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Angular provides the \",(0,n.jsx)(e.a,{href:\"https://angular.dev/guide/animations\",children:(0,n.jsx)(e.code,{children:\"@angular/animations\"})}),\" module.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Vue provides the \",(0,n.jsx)(e.a,{href:\"https://vuejs.org/guide/built-ins/transition.html\",children:(0,n.jsx)(e.code,{children:\"<Transition>\"})}),\" and \",(0,n.jsx)(e.a,{href:\"https://vuejs.org/guide/built-ins/transition-group.html\",children:(0,n.jsx)(e.code,{children:\"<TransitionGroup>\"})}),\" components.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Svelte provides the \",(0,n.jsx)(e.a,{href:\"https://svelte.dev/docs/svelte-animate\",children:(0,n.jsx)(e.code,{children:\"svelte/animate\"})}),\" module.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In production cases, most apps are better off using the battle-tested libraries mentioned over rolling custom animations and transitions.\"}),`\n`,(0,n.jsx)(e.p,{children:\"However, for practice purposes, let's complete this question by implementing the transitions from scratch.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How to transition\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Since the current and new images do not affect DOM layout, the CSS \",(0,n.jsx)(e.code,{children:\"transform\"}),\" property is a perfect choice for transitioning because of:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"GPU acceleration\"}),\": Many browsers can offload transform operations to the GPU, resulting in smoother animations and better overall performance.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced repaints\"}),\": CSS \",(0,n.jsx)(e.code,{children:\"transform\"}),\"s don't trigger repaints of the entire page layout, unlike changes to properties like like \",(0,n.jsx)(e.code,{children:\"left\"}),\" and \",(0,n.jsx)(e.code,{children:\"margin\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Assuming we're transitioning from the first image to the second image, the transition can be executed as such:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The current image is the default state and starts without any CSS transforms. It ends with \",(0,n.jsx)(e.code,{children:\"transform: transformX(-100%)\"}),\" (displaced to the left, hidden out of view).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The next image starts with a CSS transform of \",(0,n.jsx)(e.code,{children:\"transform: transformX(100%)\"}),\" (displaced to the right, hidden out of view). It ends without any CSS transforms since it is meant to end with the default state and replace the current image.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"We can create the following CSS classes to support these CSS transitions:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.image-carousel__image {\n  /* Other irrelevant CSS omitted. */\n  transition: transform 0.5s linear;\n}\n\n.image-carousel__image--displaced-left {\n  transform: translateX(-100%);\n}\n\n.image-carousel__image--displaced-right {\n  transform: translateX(100%);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"These classes can be used to support a transition from the right-to-left direction as well by switching the order.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Transition stages\"}),`\n`,(0,n.jsx)(e.p,{children:\"For an image carousel transitioning between two images, the transition can be done in the following stages:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Idle\"}),\": Render only the current image in the DOM.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Before transition\"}),\": Upon receiving the instruction to navigate to a new image (e.g. via a button click), render two images (both current and next image) into the DOM. The next image is not visible yet, but is present in the DOM so that it can be transitioned in.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transitioning\"}),\": The current image translates out (exit transition). The next image translates in (entrance transition).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transition end\"}),\": The images are at their new positions. The current image should not be visible anymore and can be removed from the DOM. Only the next image is visible.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Back to idle\"}),\": The next image is now the current image and is the only visible image rendered in the DOM.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"As mentioned, the component will need to support both current and new states, on top of the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\" value, there will be two new state values needed to support the transition stages above \\u2013 \",(0,n.jsx)(e.code,{children:\"nextIndex\"}),\" and \",(0,n.jsx)(e.code,{children:\"isTransitioning\"}),\".\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Idle\"}),\": In the idle stage, the image carousel displays the image based on the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Before transition\"}),\": When a button press happens, the \",(0,n.jsx)(e.code,{children:\"changeImageIndex\"}),\" function is called, which sets the \",(0,n.jsx)(e.code,{children:\"nextIndex\"}),' value, the carousel is now in the \"Before transition\" stage. With the new ',(0,n.jsx)(e.code,{children:\"nextIndex\"}),\" value, render the next image to the DOM (not visible yet). At this stage, both images are in the DOM, with the next image in a displaced position that is not visible. As mentioned above, the displacement can be achieved with \",(0,n.jsx)(e.code,{children:\"transform: translateX(...)\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transitioning\"}),\": The transition is kicked off in the next frame with the help of \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame()\"}),\". Without starting the transition in the next frame, the next image does not have an initial state to transition from and the transition will not happen. The current image translates out via \",(0,n.jsx)(e.code,{children:\"transform: translateX(...)\"}),\", while the next image translates in. The end state of the next image is without any \",(0,n.jsx)(e.code,{children:\"transform\"}),\" properties.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transition end\"}),\": At this point, the original image has been displaced and is no longer visible, the next image is the only visible image remaining. A \",(0,n.jsx)(e.code,{children:\"transitionend\"}),\" listener is added to the next image element to notify the component when the transition has ended.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Back to idle\"}),': The various state values can be reset to the \"Idle\" stage. By setting the ',(0,n.jsx)(e.code,{children:\"currIndex\"}),\" to be the new value, the previous image will be removed from the DOM. For frameworks that make use of virtual DOMs, the new \",(0,n.jsx)(e.code,{children:\"<img>\"}),\" element should be used as the current image. In React, specifying the \",(0,n.jsx)(e.code,{children:\"key\"}),\" value helps to signal to the framework to reuse particular elements across renders. Without the \",(0,n.jsx)(e.code,{children:\"key\"}),\" value, React will attempt to destroy the \",(0,n.jsx)(e.code,{children:\"<img>\"}),\" element and recreate it, messing with the transitions.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a table demonstrating the various stages and the respective state values when going from the first image to the second image:\"}),`\n`,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:\"Stage\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"currIndex\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"nextIndex\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"isTransitioning\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"currImage\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"nextImage\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Idle\"}),(0,n.jsx)(e.td,{children:\"0\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"null\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"false\"})}),(0,n.jsx)(e.td,{children:\"Visible\"}),(0,n.jsx)(e.td,{children:\"Not in DOM\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Preparing for transition\"}),(0,n.jsx)(e.td,{children:\"0\"}),(0,n.jsx)(e.td,{children:\"1\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"false\"})}),(0,n.jsx)(e.td,{children:\"Visible\"}),(0,n.jsx)(e.td,{children:\"Displaced (Not visible)\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Transitioning\"}),(0,n.jsx)(e.td,{children:\"0\"}),(0,n.jsx)(e.td,{children:\"1\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"true\"})}),(0,n.jsx)(e.td,{children:\"Transitioning\"}),(0,n.jsx)(e.td,{children:\"Transitioning\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Transition end\"}),(0,n.jsx)(e.td,{children:\"0\"}),(0,n.jsx)(e.td,{children:\"1\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"true\"})}),(0,n.jsx)(e.td,{children:\"Displaced (Not visible)\"}),(0,n.jsx)(e.td,{children:\"Visible\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Back to idle\"}),(0,n.jsx)(e.td,{children:\"1\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"null\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"false\"})}),(0,n.jsx)(e.td,{children:\"Not in DOM\"}),(0,n.jsx)(e.td,{children:\"Visible\"})]})]})]}),`\n`,(0,n.jsx)(e.p,{children:\"As you can see, animating just two images horizontally already requires multiple state transitions, the code can get complex very easily when adding more animations.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Events while transitioning\"}),`\n`,(0,n.jsx)(e.p,{children:\"As mentioned above, determining how to handle events on elements that are transitioning out can be tricky. Should they still be interactive? How do you prevent unintended interactions?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The easiest and most reasonable approach to do is to disable the buttons while the transition is ongoing. The \",(0,n.jsx)(e.code,{children:\"isTransitioning\"}),\" value can be used to determine ongoing transitions and disable event handling on the buttons if so.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Follow up\"}),`\n`,(0,n.jsx)(e.p,{children:\"What we have implemented is a simple image carousel. But image carousels can be packed with more features and multiple further improvements. Here are some common follow up questions you can expect:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Notice that the new images can take some time to load and a flash of black is seen (due to the background color). How can you load images eagerly so that no loading flashes occur?\"}),`\n`,(0,n.jsx)(e.li,{children:\"How can you support autoplay functionality, aka the carousel transitions to the next image after a specified duration?\"}),`\n`,(0,n.jsx)(e.li,{children:\"How can you support an infinite list of images?\"}),`\n`]})]})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(g,t)})):g(t)}var p=D;var r=c(l());function f(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},t.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Ensure test cases for basic navigation still pass.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Click the navigation buttons in rapid succession (while the transition is ongoing) and check that no unexpected behavior occurs.\"}),`\n`]})]})}function C(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(f,t)})):f(t)}var b=C;var i=c(l());function v(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",strong:\"strong\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Accessibility (A11y)\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"All images should have \",(0,i.jsx)(e.code,{children:\"alt\"}),\" text that describes the image to support accessibility. It will be read out loud by screen readers and is also used by search engines.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Add appropriate \",(0,i.jsx)(e.code,{children:\"aria-label\"}),\"s to the buttons since the buttons do not have visible labels.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"[Not implemented]\"}),\": Add a screen-reader-only element with the \",(0,i.jsx)(e.code,{children:'aria-live=\"polite\"'}),\" attribute and \",(0,i.jsx)(e.code,{children:\"alt\"}),\" text of the new image as contents. This instructs screen readers to announce that a new image is displayed.\"]}),`\n`]})]})}function O(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(v,t)})):v(t)}var w=O;function y(t){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(p,{}),`\n`,(0,a.jsx)(b,{}),`\n`,(0,a.jsx)(w,{})]})}function A(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(y,t)})):y(t)}var X=A;return _(F);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var x=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),I=(t,e)=>{for(var o in e)d(t,o,{get:e[o],enumerable:!0})},m=(t,e,o,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of k(e))!M.call(t,s)&&s!==o&&d(t,s,{get:()=>e[s],enumerable:!(h=T(e,s))||h.enumerable});return t};var c=(t,e,o)=>(o=t!=null?x(S(t)):{},m(e||!t||!t.__esModule?d(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>m(d({},\"__esModule\",{value:!0}),t);var l=j((H,u)=>{u.exports=_jsx_runtime});var F={};I(F,{default:()=>X});var a=c(l());var n=c(l());function g(t){let e=Object.assign({h2:\"h2\",p:\"p\",h3:\"h3\",ul:\"ul\",li:\"li\",a:\"a\",code:\"code\",strong:\"strong\",pre:\"pre\",ol:\"ol\",table:\"table\",thead:\"thead\",tr:\"tr\",th:\"th\",tbody:\"tbody\",td:\"td\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"We are able to reuse most of the existing markup for this question. The complexity is in rendering both current + new images, and animating the transitions.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Complexities of CSS transitions\"}),`\n`,(0,n.jsx)(e.p,{children:\"CSS transitions which involve removal of the animated elements at the end can be quite tricky to implement well. The element needs to stay in the DOM for the duration of the transition, then be removed. Removing the element typically requires JavaScript intervention. You need to coordinate the CSS transition duration with the JavaScript timing for element removal, which can lead to synchronization issues.\"}),`\n`,(0,n.jsx)(e.p,{children:\"If a transition is cancelled or interrupted (e.g., by quickly toggling a state), you need to handle these cases gracefully, potentially removing the element immediately or reverting to a different state.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Determining how to handle events on elements that are transitioning out can be tricky. Should they still be interactive? How do you prevent unintended interactions?\"}),`\n`,(0,n.jsx)(e.p,{children:\"It is hard to build transitions that involve entering and leaving the DOM when using declarative UI frameworks because these frameworks render based the UI on the current state. Transitions usually involve displaying both current and new states at the same time, which means your UI code has to include both current + new state values and include the logic for transitioning between them correctly and with the right timing. These can be quite complex to implement correctly after accounting for the scenarios listed above.\"}),`\n`,(0,n.jsx)(e.p,{children:\"Thus, it is common for frameworks to provide abstractions to make implementing animations easier:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"React does not provide any first class abstractions but endorses React-specific animation libraries like \",(0,n.jsx)(e.a,{href:\"https://reactcommunity.org/react-transition-group/\",children:\"React Transition Group\"}),\" and \",(0,n.jsx)(e.a,{href:\"https://framer.com/motion\",children:\"Framer Motion\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Angular provides the \",(0,n.jsx)(e.a,{href:\"https://angular.dev/guide/animations\",children:(0,n.jsx)(e.code,{children:\"@angular/animations\"})}),\" module.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Vue provides the \",(0,n.jsx)(e.a,{href:\"https://vuejs.org/guide/built-ins/transition.html\",children:(0,n.jsx)(e.code,{children:\"<Transition>\"})}),\" and \",(0,n.jsx)(e.a,{href:\"https://vuejs.org/guide/built-ins/transition-group.html\",children:(0,n.jsx)(e.code,{children:\"<TransitionGroup>\"})}),\" components.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Svelte provides the \",(0,n.jsx)(e.a,{href:\"https://svelte.dev/docs/svelte-animate\",children:(0,n.jsx)(e.code,{children:\"svelte/animate\"})}),\" module.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In production cases, most apps are better off using the battle-tested libraries mentioned over rolling custom animations and transitions.\"}),`\n`,(0,n.jsx)(e.p,{children:\"However, for practice purposes, let's complete this question by implementing the transitions from scratch.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"How to transition\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Since the current and new images do not affect DOM layout, the CSS \",(0,n.jsx)(e.code,{children:\"transform\"}),\" property is a perfect choice for transitioning because of:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"GPU acceleration\"}),\": Many browsers can offload transform operations to the GPU, resulting in smoother animations and better overall performance.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Reduced repaints\"}),\": CSS \",(0,n.jsx)(e.code,{children:\"transform\"}),\"s don't trigger repaints of the entire page layout, unlike changes to properties like like \",(0,n.jsx)(e.code,{children:\"left\"}),\" and \",(0,n.jsx)(e.code,{children:\"margin\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Assuming we're transitioning from the first image to the second image, the transition can be executed as such:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The current image is the default state and starts without any CSS transforms. It ends with \",(0,n.jsx)(e.code,{children:\"transform: transformX(-100%)\"}),\" (displaced to the left, hidden out of view).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The next image starts with a CSS transform of \",(0,n.jsx)(e.code,{children:\"transform: transformX(100%)\"}),\" (displaced to the right, hidden out of view). It ends without any CSS transforms since it is meant to end with the default state and replace the current image.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"We can create the following CSS classes to support these CSS transitions:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.image-carousel__image {\n  /* Other irrelevant CSS omitted. */\n  transition: transform 0.5s linear;\n}\n\n.image-carousel__image--displaced-left {\n  transform: translateX(-100%);\n}\n\n.image-carousel__image--displaced-right {\n  transform: translateX(100%);\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"These classes can be used to support a transition from the right-to-left direction as well by switching the order.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Transition stages\"}),`\n`,(0,n.jsx)(e.p,{children:\"For an image carousel transitioning between two images, the transition can be done in the following stages:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Idle\"}),\": Render only the current image in the DOM.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Before transition\"}),\": Upon receiving the instruction to navigate to a new image (e.g. via a button click), render two images (both current and next image) into the DOM. The next image is not visible yet, but is present in the DOM so that it can be transitioned in.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transitioning\"}),\": The current image translates out (exit transition). The next image translates in (entrance transition).\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transition end\"}),\": The images are at their new positions. The current image should not be visible anymore and can be removed from the DOM. Only the next image is visible.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Back to idle\"}),\": The next image is now the current image and is the only visible image rendered in the DOM.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"As mentioned, the component will need to support both current and new states, on top of the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\" value, there will be two new state values needed to support the transition stages above \\u2013 \",(0,n.jsx)(e.code,{children:\"nextIndex\"}),\" and \",(0,n.jsx)(e.code,{children:\"isTransitioning\"}),\".\"]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Idle\"}),\": In the idle stage, the image carousel displays the image based on the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Before transition\"}),\": When a button press happens, the \",(0,n.jsx)(e.code,{children:\"changeImageIndex\"}),\" function is called, which sets the \",(0,n.jsx)(e.code,{children:\"nextIndex\"}),' value, the carousel is now in the \"Before transition\" stage. With the new ',(0,n.jsx)(e.code,{children:\"nextIndex\"}),\" value, render the next image to the DOM (not visible yet). At this stage, both images are in the DOM, with the next image in a displaced position that is not visible. As mentioned above, the displacement can be achieved with \",(0,n.jsx)(e.code,{children:\"transform: translateX(...)\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transitioning\"}),\": The transition is kicked off in the next frame with the help of \",(0,n.jsx)(e.code,{children:\"requestAnimationFrame()\"}),\". Without starting the transition in the next frame, the next image does not have an initial state to transition from and the transition will not happen. The current image translates out via \",(0,n.jsx)(e.code,{children:\"transform: translateX(...)\"}),\", while the next image translates in. The end state of the next image is without any \",(0,n.jsx)(e.code,{children:\"transform\"}),\" properties.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Transition end\"}),\": At this point, the original image has been displaced and is no longer visible, the next image is the only visible image remaining. A \",(0,n.jsx)(e.code,{children:\"transitionend\"}),\" listener is added to the next image element to notify the component when the transition has ended.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Back to idle\"}),': The various state values can be reset to the \"Idle\" stage. By setting the ',(0,n.jsx)(e.code,{children:\"currIndex\"}),\" to be the new value, the previous image will be removed from the DOM. For frameworks that make use of virtual DOMs, the new \",(0,n.jsx)(e.code,{children:\"<img>\"}),\" element should be used as the current image. In React, specifying the \",(0,n.jsx)(e.code,{children:\"key\"}),\" value helps to signal to the framework to reuse particular elements across renders. Without the \",(0,n.jsx)(e.code,{children:\"key\"}),\" value, React will attempt to destroy the \",(0,n.jsx)(e.code,{children:\"<img>\"}),\" element and recreate it, messing with the transitions.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a table demonstrating the various stages and the respective state values when going from the first image to the second image:\"}),`\n`,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:\"Stage\"}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"currIndex\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"nextIndex\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"isTransitioning\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"currImage\"})}),(0,n.jsx)(e.th,{children:(0,n.jsx)(e.code,{children:\"nextImage\"})})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Idle\"}),(0,n.jsx)(e.td,{children:\"0\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"null\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"false\"})}),(0,n.jsx)(e.td,{children:\"Visible\"}),(0,n.jsx)(e.td,{children:\"Not in DOM\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Preparing for transition\"}),(0,n.jsx)(e.td,{children:\"0\"}),(0,n.jsx)(e.td,{children:\"1\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"false\"})}),(0,n.jsx)(e.td,{children:\"Visible\"}),(0,n.jsx)(e.td,{children:\"Displaced (Not visible)\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Transitioning\"}),(0,n.jsx)(e.td,{children:\"0\"}),(0,n.jsx)(e.td,{children:\"1\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"true\"})}),(0,n.jsx)(e.td,{children:\"Transitioning\"}),(0,n.jsx)(e.td,{children:\"Transitioning\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Transition end\"}),(0,n.jsx)(e.td,{children:\"0\"}),(0,n.jsx)(e.td,{children:\"1\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"true\"})}),(0,n.jsx)(e.td,{children:\"Displaced (Not visible)\"}),(0,n.jsx)(e.td,{children:\"Visible\"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\"Back to idle\"}),(0,n.jsx)(e.td,{children:\"1\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"null\"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\"false\"})}),(0,n.jsx)(e.td,{children:\"Not in DOM\"}),(0,n.jsx)(e.td,{children:\"Visible\"})]})]})]}),`\n`,(0,n.jsx)(e.p,{children:\"As you can see, animating just two images horizontally already requires multiple state transitions, the code can get complex very easily when adding more animations.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Events while transitioning\"}),`\n`,(0,n.jsx)(e.p,{children:\"As mentioned above, determining how to handle events on elements that are transitioning out can be tricky. Should they still be interactive? How do you prevent unintended interactions?\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The easiest and most reasonable approach to do is to disable the buttons while the transition is ongoing. The \",(0,n.jsx)(e.code,{children:\"isTransitioning\"}),\" value can be used to determine ongoing transitions and disable event handling on the buttons if so.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Follow up\"}),`\n`,(0,n.jsx)(e.p,{children:\"What we have implemented is a simple image carousel. But image carousels can be packed with more features and multiple further improvements. Here are some common follow up questions you can expect:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Notice that the new images can take some time to load and a flash of black is seen (due to the background color). How can you load images eagerly so that no loading flashes occur?\"}),`\n`,(0,n.jsx)(e.li,{children:\"How can you support autoplay functionality, aka the carousel transitions to the next image after a specified duration?\"}),`\n`,(0,n.jsx)(e.li,{children:\"How can you support an infinite list of images?\"}),`\n`]})]})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(g,t)})):g(t)}var p=D;var r=c(l());function f(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},t.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:\"Ensure test cases for basic navigation still pass.\"}),`\n`,(0,r.jsx)(e.li,{children:\"Click the navigation buttons in rapid succession (while the transition is ongoing) and check that no unexpected behavior occurs.\"}),`\n`]})]})}function C(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(f,t)})):f(t)}var b=C;var i=c(l());function v(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",strong:\"strong\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Accessibility\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"All images should have \",(0,i.jsx)(e.code,{children:\"alt\"}),\" text that describes the image to support accessibility. It will be read out loud by screen readers and is also used by search engines.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Add appropriate \",(0,i.jsx)(e.code,{children:\"aria-label\"}),\"s to the buttons since the buttons do not have visible labels.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.strong,{children:\"[Not implemented]\"}),\": Add a screen-reader-only element with the \",(0,i.jsx)(e.code,{children:'aria-live=\"polite\"'}),\" attribute and \",(0,i.jsx)(e.code,{children:\"alt\"}),\" text of the new image as contents. This instructs screen readers to announce that a new image is displayed.\"]}),`\n`]})]})}function O(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(v,t)})):v(t)}var w=O;function y(t){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(p,{}),`\n`,(0,a.jsx)(b,{}),`\n`,(0,a.jsx)(w,{})]})}function A(t={}){let{wrapper:e}=t.components||{};return e?(0,a.jsx)(e,Object.assign({},t,{children:(0,a.jsx)(y,t)})):y(t)}var X=A;return _(F);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/image-carousel/metadata.json b/apps/web/src/__generated__/questions/user-interface/image-carousel/metadata.json
index 99576e3a7..91e227b77 100644
--- a/apps/web/src/__generated__/questions/user-interface/image-carousel/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/image-carousel/metadata.json
@@ -40,5 +40,7 @@
   "slug": "image-carousel",
   "subtitle": null,
   "title": "Image Carousel",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/image-carousel/react/solution.json b/apps/web/src/__generated__/questions/user-interface/image-carousel/react/solution.json
index d64f98e44..868f2f991 100644
--- a/apps/web/src/__generated__/questions/user-interface/image-carousel/react/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/image-carousel/react/solution.json
@@ -32,5 +32,5 @@
     "activeFile": "/src/ImageCarousel.tsx",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var w=Object.create;var c=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var D=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),M=(t,e)=>{for(var l in e)c(t,l,{get:e[l],enumerable:!0})},u=(t,e,l,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of _(e))!T.call(t,a)&&a!==l&&c(t,a,{get:()=>e[a],enumerable:!(d=j(e,a))||d.enumerable});return t};var s=(t,e,l)=>(l=t!=null?w(C(t)):{},u(e||!t||!t.__esModule?c(l,\"default\",{value:t,enumerable:!0}):l,t)),S=t=>u(c({},\"__esModule\",{value:!0}),t);var h=D((L,m)=>{m.exports=_jsx_runtime});var z={};M(z,{default:()=>I});var o=s(h());var n=s(h());function g(t){let e=Object.assign({h2:\"h2\",p:\"p\",ol:\"ol\",li:\"li\",strong:\"strong\",h3:\"h3\",h4:\"h4\",code:\"code\",a:\"a\",ul:\"ul\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"The solution can be broken down into two parts:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rendering\"}),\": Layout and positioning of buttons\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"State management\"}),\": State design and state changes\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,n.jsx)(e.p,{children:\"The image carousel layout consists of 3 parts:\"}),`\n`,(0,n.jsx)(e.h4,{children:\"1. Image carousel container\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The root of the image carousel will be the element responsible for the overall dimensions and containing the displayed image and button elements. Since the height is fixed, we can set \",(0,n.jsx)(e.code,{children:\"height: 400px\"}),\" on the root element. However, the width is fluid and on screens smaller than 600px, it should shrink to fit within the screen. For this behavior, we can use the CSS \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/min\",children:(0,n.jsx)(e.code,{children:\"min\"})}),\" function (e.g. \",(0,n.jsx)(e.code,{children:\"min(600px, 100vw)\"}),\").\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"2. Displayed image\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The image can be rendered using normal \",(0,n.jsx)(e.code,{children:\"<img>\"}),\" tags and \",(0,n.jsx)(e.code,{children:\"object-fit: contain\"}),\", which resizes the image to fit the available space of 600px x 400px while maintaining the innate aspect ratio of the image.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"3. Navigation buttons\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The various buttons are positioned at fixed locations within the image carousel. This is achieved through adding \",(0,n.jsx)(e.code,{children:\"position: relative\"}),\" on the root element of the image carousel and \",(0,n.jsx)(e.code,{children:\"position: absolute\"}),\" to the button elements.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To vertically center the prev/next buttons, use a combination of \",(0,n.jsx)(e.code,{children:\"top: 50%; transform: translateY(-50%)\"}),\". \",(0,n.jsx)(e.code,{children:\"top: 50%\"}),\" positions the element to have a vertical offset of 50% of the container element, and \",(0,n.jsx)(e.code,{children:\"translateY(-50%)\"}),\" will shift the element up by half of the element's height. The pages buttons are horizontally-centered and can be done in a similar fashion.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"State\"}),`\n`,(0,n.jsx)(e.p,{children:\"The minimal state needed for an image carousel is the current image index. Only one state value is needed.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"State changes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Next button\"}),\": Increment the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\" by one.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Prev button\"}),\": Decrement the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\" by one.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Page button\"}),\": Directly set the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\" to the page number.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To enable the cycling behavior, we need to make sure that the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\" is always between \",(0,n.jsx)(e.code,{children:\"0\"}),\" and \",(0,n.jsx)(e.code,{children:\"images.length - 1\"}),\". We can achieve this by adding \",(0,n.jsx)(e.code,{children:\"images.length\"}),\" to any value, and using the modulo operator (\",(0,n.jsx)(e.code,{children:\"%\"}),\").\"]})]})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(g,t)})):g(t)}var p=k;var i=s(h());function b(t){let e=Object.assign({h2:\"h2\",ol:\"ol\",li:\"li\",ul:\"ul\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ol,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Functionality:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Verify that the carousel displays the first image from the provided array upon initial load.\"}),`\n`,(0,i.jsxs)(e.li,{children:[\"Prev/next buttons\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Clicking the right button moves to the next image.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking the left button moves to the previous image.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Page buttons\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Clicking on the page button displays the respective image.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Cycling behavior:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Clicking the right button on the last image should display the first image.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking the left button on the first image should display the last image\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsx)(e.li,{children:\"Ensure all images in the array are accessible through navigation\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Display and sizing:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Verify the carousel is centered on the screen\"}),`\n`,(0,i.jsx)(e.li,{children:\"Check that the maximum size of the carousel is 600px by 400px\"}),`\n`,(0,i.jsx)(e.li,{children:\"Ensure images are fully visible within the carousel\"}),`\n`,(0,i.jsx)(e.li,{children:\"Confirm that images maintain their aspect ratio when resized\"}),`\n`,(0,i.jsx)(e.li,{children:\"Verify that empty parts of the carousel are filled with black\"}),`\n`]}),`\n`]}),`\n`]})]})}function F(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(b,t)})):b(t)}var f=F;var r=s(h());function x(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",strong:\"strong\"},t.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"Accessibility (A11y)\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"All images should have \",(0,r.jsx)(e.code,{children:\"alt\"}),\" text that describes the image to support accessibility. It will be read out loud by screen readers and is also used by search engines.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"Add appropriate \",(0,r.jsx)(e.code,{children:\"aria-label\"}),\"s to the buttons since the buttons do not have visible labels.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"[Not implemented]\"}),\": Add a screen-reader-only element with the \",(0,r.jsx)(e.code,{children:'aria-live=\"polite\"'}),\" attribute and \",(0,r.jsx)(e.code,{children:\"alt\"}),\" text of the new image as contents. This instructs screen readers to announce that a new image is displayed.\"]}),`\n`]})]})}function O(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(x,t)})):x(t)}var y=O;function v(t){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(p,{}),`\n`,(0,o.jsx)(f,{}),`\n`,(0,o.jsx)(y,{})]})}function X(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,Object.assign({},t,{children:(0,o.jsx)(v,t)})):v(t)}var I=X;return S(z);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var w=Object.create;var c=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var D=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),M=(t,e)=>{for(var l in e)c(t,l,{get:e[l],enumerable:!0})},u=(t,e,l,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of _(e))!T.call(t,a)&&a!==l&&c(t,a,{get:()=>e[a],enumerable:!(d=j(e,a))||d.enumerable});return t};var s=(t,e,l)=>(l=t!=null?w(C(t)):{},u(e||!t||!t.__esModule?c(l,\"default\",{value:t,enumerable:!0}):l,t)),S=t=>u(c({},\"__esModule\",{value:!0}),t);var h=D((L,m)=>{m.exports=_jsx_runtime});var z={};M(z,{default:()=>I});var o=s(h());var n=s(h());function g(t){let e=Object.assign({h2:\"h2\",p:\"p\",ol:\"ol\",li:\"li\",strong:\"strong\",h3:\"h3\",h4:\"h4\",code:\"code\",a:\"a\",ul:\"ul\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"The solution can be broken down into two parts:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Rendering\"}),\": Layout and positioning of buttons\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"State management\"}),\": State design and state changes\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,n.jsx)(e.p,{children:\"The image carousel layout consists of 3 parts:\"}),`\n`,(0,n.jsx)(e.h4,{children:\"1. Image carousel container\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The root of the image carousel will be the element responsible for the overall dimensions and containing the displayed image and button elements. Since the height is fixed, we can set \",(0,n.jsx)(e.code,{children:\"height: 400px\"}),\" on the root element. However, the width is fluid and on screens smaller than 600px, it should shrink to fit within the screen. For this behavior, we can use the CSS \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/min\",children:(0,n.jsx)(e.code,{children:\"min\"})}),\" function (e.g. \",(0,n.jsx)(e.code,{children:\"min(600px, 100vw)\"}),\").\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"2. Displayed image\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The image can be rendered using normal \",(0,n.jsx)(e.code,{children:\"<img>\"}),\" tags and \",(0,n.jsx)(e.code,{children:\"object-fit: contain\"}),\", which resizes the image to fit the available space of 600px x 400px while maintaining the innate aspect ratio of the image.\"]}),`\n`,(0,n.jsx)(e.h4,{children:\"3. Navigation buttons\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The various buttons are positioned at fixed locations within the image carousel. This is achieved through adding \",(0,n.jsx)(e.code,{children:\"position: relative\"}),\" on the root element of the image carousel and \",(0,n.jsx)(e.code,{children:\"position: absolute\"}),\" to the button elements.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To vertically center the prev/next buttons, use a combination of \",(0,n.jsx)(e.code,{children:\"top: 50%; transform: translateY(-50%)\"}),\". \",(0,n.jsx)(e.code,{children:\"top: 50%\"}),\" positions the element to have a vertical offset of 50% of the container element, and \",(0,n.jsx)(e.code,{children:\"translateY(-50%)\"}),\" will shift the element up by half of the element's height. The pages buttons are horizontally-centered and can be done in a similar fashion.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"State\"}),`\n`,(0,n.jsx)(e.p,{children:\"The minimal state needed for an image carousel is the current image index. Only one state value is needed.\"}),`\n`,(0,n.jsx)(e.h4,{children:\"State changes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Next button\"}),\": Increment the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\" by one.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Prev button\"}),\": Decrement the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\" by one.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Page button\"}),\": Directly set the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\" to the page number.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To enable the cycling behavior, we need to make sure that the \",(0,n.jsx)(e.code,{children:\"currIndex\"}),\" is always between \",(0,n.jsx)(e.code,{children:\"0\"}),\" and \",(0,n.jsx)(e.code,{children:\"images.length - 1\"}),\". We can achieve this by adding \",(0,n.jsx)(e.code,{children:\"images.length\"}),\" to any value, and using the modulo operator (\",(0,n.jsx)(e.code,{children:\"%\"}),\").\"]})]})}function k(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(g,t)})):g(t)}var p=k;var i=s(h());function b(t){let e=Object.assign({h2:\"h2\",ol:\"ol\",li:\"li\",ul:\"ul\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ol,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Functionality:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Verify that the carousel displays the first image from the provided array upon initial load.\"}),`\n`,(0,i.jsxs)(e.li,{children:[\"Prev/next buttons\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Clicking the right button moves to the next image.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking the left button moves to the previous image.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Page buttons\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Clicking on the page button displays the respective image.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Cycling behavior:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Clicking the right button on the last image should display the first image.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking the left button on the first image should display the last image\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsx)(e.li,{children:\"Ensure all images in the array are accessible through navigation\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Display and sizing:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Verify the carousel is centered on the screen\"}),`\n`,(0,i.jsx)(e.li,{children:\"Check that the maximum size of the carousel is 600px by 400px\"}),`\n`,(0,i.jsx)(e.li,{children:\"Ensure images are fully visible within the carousel\"}),`\n`,(0,i.jsx)(e.li,{children:\"Confirm that images maintain their aspect ratio when resized\"}),`\n`,(0,i.jsx)(e.li,{children:\"Verify that empty parts of the carousel are filled with black\"}),`\n`]}),`\n`]}),`\n`]})]})}function F(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(b,t)})):b(t)}var f=F;var r=s(h());function x(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",strong:\"strong\"},t.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"Accessibility\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"All images should have \",(0,r.jsx)(e.code,{children:\"alt\"}),\" text that describes the image to support accessibility. It will be read out loud by screen readers and is also used by search engines.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"Add appropriate \",(0,r.jsx)(e.code,{children:\"aria-label\"}),\"s to the buttons since the buttons do not have visible labels.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:\"[Not implemented]\"}),\": Add a screen-reader-only element with the \",(0,r.jsx)(e.code,{children:'aria-live=\"polite\"'}),\" attribute and \",(0,r.jsx)(e.code,{children:\"alt\"}),\" text of the new image as contents. This instructs screen readers to announce that a new image is displayed.\"]}),`\n`]})]})}function O(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(x,t)})):x(t)}var y=O;function v(t){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(p,{}),`\n`,(0,o.jsx)(f,{}),`\n`,(0,o.jsx)(y,{})]})}function X(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,Object.assign({},t,{children:(0,o.jsx)(v,t)})):v(t)}var I=X;return S(z);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/job-board/angular/skeleton.json b/apps/web/src/__generated__/questions/user-interface/job-board/angular/skeleton.json
index 351e55f99..1b015afd4 100644
--- a/apps/web/src/__generated__/questions/user-interface/job-board/angular/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/job-board/angular/skeleton.json
@@ -47,5 +47,5 @@
     "activeFile": "/src/app/app.component.ts",
     "environment": "angular-cli"
   },
-  "writeup": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of j(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var h=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),k=t=>c(r({},\"__esModule\",{value:!0}),t);var a=y((M,d)=>{d.exports=_jsx_runtime});var D={};x(D,{default:()=>C});var s=h(a());var n=h(a());function p(t){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",h3:\"h3\",a:\"a\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/job-board/job-board-example.png\",alt:\"Job board example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The page should show 6 jobs on initial load with a button to load more postings.\"}),`\n`,(0,n.jsx)(e.li,{children:`Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.`}),`\n`,(0,n.jsxs)(e.li,{children:[\"If there's a \",(0,n.jsx)(e.code,{children:\"url\"}),\" field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The timestamp can be formatted in any way you like.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"API\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hacker News has a public API to fetch jobs by Y Combinator companies. There's no single API that fetches a list of jobs together with the data, so you will have to make separate requests to fetch the necessary data and combine them to be displayed.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Stories\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches a list of job posting IDs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/jobstories.json\",children:\"https://hacker-news.firebaseio.com/v0/jobstories.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Sample response:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`[35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Details\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches job posting details given its ID.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.code,{children:\"https://hacker-news.firebaseio.com/v0/item/{id}.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sample response for \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\",children:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"by\": \"jamilbk\",\n  \"id\": 35908337,\n  \"score\": 1,\n  \"time\": 1683838872,\n  \"title\": \"Firezone (YC W22) is hiring Elixir and Rust engineers\",\n  \"type\": \"job\",\n  \"url\": \"https://www.ycombinator.com/companies/firezone/jobs\"\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The focus of this question is on functionality and not on styling, but feel free to beautify the page.\"}),`\n`,(0,n.jsx)(e.li,{children:\"To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\"}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var m=v;function b(t){return(0,s.jsx)(m,{})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var C=T;return k(D);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of j(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var h=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>c(r({},\"__esModule\",{value:!0}),t);var a=y((M,d)=>{d.exports=_jsx_runtime});var D={};k(D,{default:()=>C});var s=h(a());var n=h(a());function p(t){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",h3:\"h3\",a:\"a\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/job-board/job-board-example.png\",alt:\"Job board example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The page should show 6 jobs on initial load with a button to load more postings.\"}),`\n`,(0,n.jsx)(e.li,{children:`Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.`}),`\n`,(0,n.jsxs)(e.li,{children:[\"If there's a \",(0,n.jsx)(e.code,{children:\"url\"}),\" field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The timestamp can be formatted in any way you like.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"API\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hacker News has a public API to fetch jobs by Y Combinator companies. There's no single API that fetches a list of jobs together with the data, so you will have to make separate requests to fetch the necessary data and combine them to be displayed.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Stories\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches a list of job posting IDs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/jobstories.json\",children:\"https://hacker-news.firebaseio.com/v0/jobstories.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Sample response:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`[35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Details\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches job posting details given its ID.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.code,{children:\"https://hacker-news.firebaseio.com/v0/item/{id}.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sample response for \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\",children:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"by\": \"jamilbk\",\n  \"id\": 35908337,\n  \"score\": 1,\n  \"time\": 1683838872,\n  \"title\": \"Firezone (YC W22) is hiring Elixir and Rust engineers\",\n  \"type\": \"job\",\n  \"url\": \"https://www.ycombinator.com/companies/firezone/jobs\"\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The focus of this question is on functionality and not on styling, but feel free to beautify the page.\"}),`\n`,(0,n.jsx)(e.li,{children:\"To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\"}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var m=v;function b(t){return(0,s.jsx)(m,{})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var C=T;return x(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/job-board/metadata.json b/apps/web/src/__generated__/questions/user-interface/job-board/metadata.json
index 2bc910339..53e55589e 100644
--- a/apps/web/src/__generated__/questions/user-interface/job-board/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/job-board/metadata.json
@@ -48,5 +48,7 @@
   "slug": "job-board",
   "subtitle": null,
   "title": "Job Board",
-  "topics": []
+  "topics": [
+    "networking"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/job-board/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/job-board/react/skeleton.json
index fc0639bb4..cde95d333 100644
--- a/apps/web/src/__generated__/questions/user-interface/job-board/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/job-board/react/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of j(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var h=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),k=t=>c(r({},\"__esModule\",{value:!0}),t);var a=y((M,d)=>{d.exports=_jsx_runtime});var D={};x(D,{default:()=>C});var s=h(a());var n=h(a());function p(t){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",h3:\"h3\",a:\"a\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/job-board/job-board-example.png\",alt:\"Job board example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The page should show 6 jobs on initial load with a button to load more postings.\"}),`\n`,(0,n.jsx)(e.li,{children:`Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.`}),`\n`,(0,n.jsxs)(e.li,{children:[\"If there's a \",(0,n.jsx)(e.code,{children:\"url\"}),\" field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The timestamp can be formatted in any way you like.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"API\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hacker News has a public API to fetch jobs by Y Combinator companies. There's no single API that fetches a list of jobs together with the data, so you will have to make separate requests to fetch the necessary data and combine them to be displayed.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Stories\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches a list of job posting IDs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/jobstories.json\",children:\"https://hacker-news.firebaseio.com/v0/jobstories.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Sample response:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`[35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Details\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches job posting details given its ID.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.code,{children:\"https://hacker-news.firebaseio.com/v0/item/{id}.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sample response for \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\",children:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"by\": \"jamilbk\",\n  \"id\": 35908337,\n  \"score\": 1,\n  \"time\": 1683838872,\n  \"title\": \"Firezone (YC W22) is hiring Elixir and Rust engineers\",\n  \"type\": \"job\",\n  \"url\": \"https://www.ycombinator.com/companies/firezone/jobs\"\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The focus of this question is on functionality and not on styling, but feel free to beautify the page.\"}),`\n`,(0,n.jsx)(e.li,{children:\"To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\"}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var m=v;function b(t){return(0,s.jsx)(m,{})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var C=T;return k(D);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of j(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var h=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>c(r({},\"__esModule\",{value:!0}),t);var a=y((M,d)=>{d.exports=_jsx_runtime});var D={};k(D,{default:()=>C});var s=h(a());var n=h(a());function p(t){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",h3:\"h3\",a:\"a\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/job-board/job-board-example.png\",alt:\"Job board example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The page should show 6 jobs on initial load with a button to load more postings.\"}),`\n`,(0,n.jsx)(e.li,{children:`Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.`}),`\n`,(0,n.jsxs)(e.li,{children:[\"If there's a \",(0,n.jsx)(e.code,{children:\"url\"}),\" field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The timestamp can be formatted in any way you like.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"API\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hacker News has a public API to fetch jobs by Y Combinator companies. There's no single API that fetches a list of jobs together with the data, so you will have to make separate requests to fetch the necessary data and combine them to be displayed.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Stories\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches a list of job posting IDs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/jobstories.json\",children:\"https://hacker-news.firebaseio.com/v0/jobstories.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Sample response:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`[35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Details\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches job posting details given its ID.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.code,{children:\"https://hacker-news.firebaseio.com/v0/item/{id}.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sample response for \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\",children:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"by\": \"jamilbk\",\n  \"id\": 35908337,\n  \"score\": 1,\n  \"time\": 1683838872,\n  \"title\": \"Firezone (YC W22) is hiring Elixir and Rust engineers\",\n  \"type\": \"job\",\n  \"url\": \"https://www.ycombinator.com/companies/firezone/jobs\"\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The focus of this question is on functionality and not on styling, but feel free to beautify the page.\"}),`\n`,(0,n.jsx)(e.li,{children:\"To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\"}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var m=v;function b(t){return(0,s.jsx)(m,{})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var C=T;return x(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/job-board/svelte/skeleton.json b/apps/web/src/__generated__/questions/user-interface/job-board/svelte/skeleton.json
index 3c6bedfa7..043f0504c 100644
--- a/apps/web/src/__generated__/questions/user-interface/job-board/svelte/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/job-board/svelte/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of j(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var h=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),k=t=>c(r({},\"__esModule\",{value:!0}),t);var a=y((M,d)=>{d.exports=_jsx_runtime});var D={};x(D,{default:()=>C});var s=h(a());var n=h(a());function p(t){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",h3:\"h3\",a:\"a\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/job-board/job-board-example.png\",alt:\"Job board example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The page should show 6 jobs on initial load with a button to load more postings.\"}),`\n`,(0,n.jsx)(e.li,{children:`Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.`}),`\n`,(0,n.jsxs)(e.li,{children:[\"If there's a \",(0,n.jsx)(e.code,{children:\"url\"}),\" field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The timestamp can be formatted in any way you like.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"API\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hacker News has a public API to fetch jobs by Y Combinator companies. There's no single API that fetches a list of jobs together with the data, so you will have to make separate requests to fetch the necessary data and combine them to be displayed.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Stories\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches a list of job posting IDs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/jobstories.json\",children:\"https://hacker-news.firebaseio.com/v0/jobstories.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Sample response:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`[35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Details\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches job posting details given its ID.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.code,{children:\"https://hacker-news.firebaseio.com/v0/item/{id}.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sample response for \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\",children:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"by\": \"jamilbk\",\n  \"id\": 35908337,\n  \"score\": 1,\n  \"time\": 1683838872,\n  \"title\": \"Firezone (YC W22) is hiring Elixir and Rust engineers\",\n  \"type\": \"job\",\n  \"url\": \"https://www.ycombinator.com/companies/firezone/jobs\"\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The focus of this question is on functionality and not on styling, but feel free to beautify the page.\"}),`\n`,(0,n.jsx)(e.li,{children:\"To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\"}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var m=v;function b(t){return(0,s.jsx)(m,{})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var C=T;return k(D);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of j(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var h=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>c(r({},\"__esModule\",{value:!0}),t);var a=y((M,d)=>{d.exports=_jsx_runtime});var D={};k(D,{default:()=>C});var s=h(a());var n=h(a());function p(t){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",h3:\"h3\",a:\"a\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/job-board/job-board-example.png\",alt:\"Job board example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The page should show 6 jobs on initial load with a button to load more postings.\"}),`\n`,(0,n.jsx)(e.li,{children:`Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.`}),`\n`,(0,n.jsxs)(e.li,{children:[\"If there's a \",(0,n.jsx)(e.code,{children:\"url\"}),\" field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The timestamp can be formatted in any way you like.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"API\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hacker News has a public API to fetch jobs by Y Combinator companies. There's no single API that fetches a list of jobs together with the data, so you will have to make separate requests to fetch the necessary data and combine them to be displayed.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Stories\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches a list of job posting IDs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/jobstories.json\",children:\"https://hacker-news.firebaseio.com/v0/jobstories.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Sample response:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`[35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Details\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches job posting details given its ID.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.code,{children:\"https://hacker-news.firebaseio.com/v0/item/{id}.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sample response for \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\",children:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"by\": \"jamilbk\",\n  \"id\": 35908337,\n  \"score\": 1,\n  \"time\": 1683838872,\n  \"title\": \"Firezone (YC W22) is hiring Elixir and Rust engineers\",\n  \"type\": \"job\",\n  \"url\": \"https://www.ycombinator.com/companies/firezone/jobs\"\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The focus of this question is on functionality and not on styling, but feel free to beautify the page.\"}),`\n`,(0,n.jsx)(e.li,{children:\"To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\"}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var m=v;function b(t){return(0,s.jsx)(m,{})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var C=T;return x(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/job-board/vanilla/skeleton.json b/apps/web/src/__generated__/questions/user-interface/job-board/vanilla/skeleton.json
index c624e4342..ff43584a2 100644
--- a/apps/web/src/__generated__/questions/user-interface/job-board/vanilla/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/job-board/vanilla/skeleton.json
@@ -23,5 +23,5 @@
     "activeFile": "/src/index.html",
     "environment": "parcel"
   },
-  "writeup": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of j(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var h=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),k=t=>c(r({},\"__esModule\",{value:!0}),t);var a=y((M,d)=>{d.exports=_jsx_runtime});var D={};x(D,{default:()=>C});var s=h(a());var n=h(a());function p(t){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",h3:\"h3\",a:\"a\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/job-board/job-board-example.png\",alt:\"Job board example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The page should show 6 jobs on initial load with a button to load more postings.\"}),`\n`,(0,n.jsx)(e.li,{children:`Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.`}),`\n`,(0,n.jsxs)(e.li,{children:[\"If there's a \",(0,n.jsx)(e.code,{children:\"url\"}),\" field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The timestamp can be formatted in any way you like.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"API\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hacker News has a public API to fetch jobs by Y Combinator companies. There's no single API that fetches a list of jobs together with the data, so you will have to make separate requests to fetch the necessary data and combine them to be displayed.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Stories\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches a list of job posting IDs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/jobstories.json\",children:\"https://hacker-news.firebaseio.com/v0/jobstories.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Sample response:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`[35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Details\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches job posting details given its ID.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.code,{children:\"https://hacker-news.firebaseio.com/v0/item/{id}.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sample response for \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\",children:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"by\": \"jamilbk\",\n  \"id\": 35908337,\n  \"score\": 1,\n  \"time\": 1683838872,\n  \"title\": \"Firezone (YC W22) is hiring Elixir and Rust engineers\",\n  \"type\": \"job\",\n  \"url\": \"https://www.ycombinator.com/companies/firezone/jobs\"\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The focus of this question is on functionality and not on styling, but feel free to beautify the page.\"}),`\n`,(0,n.jsx)(e.li,{children:\"To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\"}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var m=v;function b(t){return(0,s.jsx)(m,{})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var C=T;return k(D);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of j(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var h=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>c(r({},\"__esModule\",{value:!0}),t);var a=y((M,d)=>{d.exports=_jsx_runtime});var D={};k(D,{default:()=>C});var s=h(a());var n=h(a());function p(t){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",h3:\"h3\",a:\"a\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/job-board/job-board-example.png\",alt:\"Job board example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The page should show 6 jobs on initial load with a button to load more postings.\"}),`\n`,(0,n.jsx)(e.li,{children:`Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.`}),`\n`,(0,n.jsxs)(e.li,{children:[\"If there's a \",(0,n.jsx)(e.code,{children:\"url\"}),\" field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The timestamp can be formatted in any way you like.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"API\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hacker News has a public API to fetch jobs by Y Combinator companies. There's no single API that fetches a list of jobs together with the data, so you will have to make separate requests to fetch the necessary data and combine them to be displayed.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Stories\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches a list of job posting IDs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/jobstories.json\",children:\"https://hacker-news.firebaseio.com/v0/jobstories.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Sample response:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`[35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Details\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches job posting details given its ID.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.code,{children:\"https://hacker-news.firebaseio.com/v0/item/{id}.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sample response for \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\",children:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"by\": \"jamilbk\",\n  \"id\": 35908337,\n  \"score\": 1,\n  \"time\": 1683838872,\n  \"title\": \"Firezone (YC W22) is hiring Elixir and Rust engineers\",\n  \"type\": \"job\",\n  \"url\": \"https://www.ycombinator.com/companies/firezone/jobs\"\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The focus of this question is on functionality and not on styling, but feel free to beautify the page.\"}),`\n`,(0,n.jsx)(e.li,{children:\"To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\"}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var m=v;function b(t){return(0,s.jsx)(m,{})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var C=T;return x(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/job-board/vue/skeleton.json b/apps/web/src/__generated__/questions/user-interface/job-board/vue/skeleton.json
index f7bdd72c9..841ab7c1b 100644
--- a/apps/web/src/__generated__/questions/user-interface/job-board/vue/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/job-board/vue/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.vue",
     "environment": "vue-cli"
   },
-  "writeup": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of j(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var h=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),k=t=>c(r({},\"__esModule\",{value:!0}),t);var a=y((M,d)=>{d.exports=_jsx_runtime});var D={};x(D,{default:()=>C});var s=h(a());var n=h(a());function p(t){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",h3:\"h3\",a:\"a\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/job-board/job-board-example.png\",alt:\"Job board example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The page should show 6 jobs on initial load with a button to load more postings.\"}),`\n`,(0,n.jsx)(e.li,{children:`Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.`}),`\n`,(0,n.jsxs)(e.li,{children:[\"If there's a \",(0,n.jsx)(e.code,{children:\"url\"}),\" field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The timestamp can be formatted in any way you like.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"API\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hacker News has a public API to fetch jobs by Y Combinator companies. There's no single API that fetches a list of jobs together with the data, so you will have to make separate requests to fetch the necessary data and combine them to be displayed.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Stories\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches a list of job posting IDs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/jobstories.json\",children:\"https://hacker-news.firebaseio.com/v0/jobstories.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Sample response:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`[35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Details\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches job posting details given its ID.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.code,{children:\"https://hacker-news.firebaseio.com/v0/item/{id}.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sample response for \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\",children:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"by\": \"jamilbk\",\n  \"id\": 35908337,\n  \"score\": 1,\n  \"time\": 1683838872,\n  \"title\": \"Firezone (YC W22) is hiring Elixir and Rust engineers\",\n  \"type\": \"job\",\n  \"url\": \"https://www.ycombinator.com/companies/firezone/jobs\"\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The focus of this question is on functionality and not on styling, but feel free to beautify the page.\"}),`\n`,(0,n.jsx)(e.li,{children:\"To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\"}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var m=v;function b(t){return(0,s.jsx)(m,{})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var C=T;return k(D);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of j(e))!w.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return t};var h=(t,e,o)=>(o=t!=null?u(g(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>c(r({},\"__esModule\",{value:!0}),t);var a=y((M,d)=>{d.exports=_jsx_runtime});var D={};k(D,{default:()=>C});var s=h(a());var n=h(a());function p(t){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",h3:\"h3\",a:\"a\",pre:\"pre\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/job-board/job-board-example.png\",alt:\"Job board example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The page should show 6 jobs on initial load with a button to load more postings.\"}),`\n`,(0,n.jsx)(e.li,{children:`Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.`}),`\n`,(0,n.jsxs)(e.li,{children:[\"If there's a \",(0,n.jsx)(e.code,{children:\"url\"}),\" field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"The timestamp can be formatted in any way you like.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"API\"}),`\n`,(0,n.jsx)(e.p,{children:\"Hacker News has a public API to fetch jobs by Y Combinator companies. There's no single API that fetches a list of jobs together with the data, so you will have to make separate requests to fetch the necessary data and combine them to be displayed.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Stories\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches a list of job posting IDs.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/jobstories.json\",children:\"https://hacker-news.firebaseio.com/v0/jobstories.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Sample response:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`[35908337, 35904973, 35900922, 35893439, 35890114, 35880345, ...]\n`})}),`\n`,(0,n.jsx)(e.h3,{children:\"Job Details\"}),`\n`,(0,n.jsx)(e.p,{children:\"Fetches job posting details given its ID.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"URL: \",(0,n.jsx)(e.code,{children:\"https://hacker-news.firebaseio.com/v0/item/{id}.json\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"HTTP Method: \",(0,n.jsx)(e.code,{children:\"GET\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Content Type: \",(0,n.jsx)(e.code,{children:\"json\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Sample response for \",(0,n.jsx)(e.a,{href:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\",children:\"https://hacker-news.firebaseio.com/v0/item/35908337.json\"}),\":\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-json\",children:`{\n  \"by\": \"jamilbk\",\n  \"id\": 35908337,\n  \"score\": 1,\n  \"time\": 1683838872,\n  \"title\": \"Firezone (YC W22) is hiring Elixir and Rust engineers\",\n  \"type\": \"job\",\n  \"url\": \"https://www.ycombinator.com/companies/firezone/jobs\"\n}\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"The focus of this question is on functionality and not on styling, but feel free to beautify the page.\"}),`\n`,(0,n.jsx)(e.li,{children:\"To improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\"}),`\n`]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(p,t)})):p(t)}var m=v;function b(t){return(0,s.jsx)(m,{})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var C=T;return x(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/like-button/metadata.json b/apps/web/src/__generated__/questions/user-interface/like-button/metadata.json
index 82a7f03aa..24b41ce24 100644
--- a/apps/web/src/__generated__/questions/user-interface/like-button/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/like-button/metadata.json
@@ -43,5 +43,8 @@
   "slug": "like-button",
   "subtitle": null,
   "title": "Like Button",
-  "topics": []
+  "topics": [
+    "async",
+    "networking"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/modal-dialog-ii/metadata.json b/apps/web/src/__generated__/questions/user-interface/modal-dialog-ii/metadata.json
index cbf932483..9a595f6b2 100644
--- a/apps/web/src/__generated__/questions/user-interface/modal-dialog-ii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/modal-dialog-ii/metadata.json
@@ -33,5 +33,7 @@
   "slug": "modal-dialog-ii",
   "subtitle": null,
   "title": "Modal Dialog II",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/modal-dialog-iii/metadata.json b/apps/web/src/__generated__/questions/user-interface/modal-dialog-iii/metadata.json
index b32804197..37e78e5a2 100644
--- a/apps/web/src/__generated__/questions/user-interface/modal-dialog-iii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/modal-dialog-iii/metadata.json
@@ -32,5 +32,7 @@
   "slug": "modal-dialog-iii",
   "subtitle": null,
   "title": "Modal Dialog III",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/modal-dialog-iii/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/modal-dialog-iii/react/skeleton.json
index 4695d8e35..19505edf4 100644
--- a/apps/web/src/__generated__/questions/user-interface/modal-dialog-iii/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/modal-dialog-iii/react/skeleton.json
@@ -32,5 +32,5 @@
     "activeFile": "/src/ModalDialog.tsx",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var I=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var n in e)a(o,n,{get:e[n],enumerable:!0})},d=(o,e,n,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of w(e))!b.call(o,i)&&i!==n&&a(o,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return o};var c=(o,e,n)=>(n=o!=null?p(y(o)):{},d(e||!o||!o.__esModule?a(n,\"default\",{value:o,enumerable:!0}):n,o)),q=o=>d(a({},\"__esModule\",{value:!0}),o);var r=I((v,h)=>{h.exports=_jsx_runtime});var A={};x(A,{default:()=>M});var s=c(r());var t=c(r());function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-ii\",children:\"Modal Dialog II\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-ii\",children:\"Modal Dialog II\"}),\", we built a functional modal dialog component that has the necessary \",(0,t.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties\",children:\"WAI-ARIA roles, states, and properties\"}),\". For a completely accessible modal dialog component, we should also add the \",(0,t.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#keyboardinteraction\",children:\"necessary keyboard interactions\"}),\".\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The required keyboard interactions will be done across this question and \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-iv\",children:\"Modal Dialog IV\"}),\". For this question, the focus is on implementing other convenient ways to close a modal dialog.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsx)(e.p,{children:'The current modal dialog can be dismissed by clicking on the \"Close\" button within the dialog contents. However, modal dialogs should also support other convenient ways of closing the dialog:'}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Clicking outside the modal dialog component (e.g. the overlay)\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Hitting the \",(0,t.jsx)(\"kbd\",{children:\"Escape\"}),\" key\"]}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"Add support for these interactions.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The focus of this question is on adding closing dialog functionality, not the styling and structure. The solution to \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-ii\",children:\"Modal Dialog II\"}),\" has been provided here for you to build on top of. You can reuse the existing styling and structure.\"]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,t.jsx)(e,Object.assign({},o,{children:(0,t.jsx)(u,o)})):u(o)}var g=j;function m(o){return(0,s.jsx)(g,{})}function D(o={}){let{wrapper:e}=o.components||{};return e?(0,s.jsx)(e,Object.assign({},o,{children:(0,s.jsx)(m,o)})):m(o)}var M=D;return q(A);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var I=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var n in e)a(o,n,{get:e[n],enumerable:!0})},d=(o,e,n,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of y(e))!b.call(o,i)&&i!==n&&a(o,i,{get:()=>e[i],enumerable:!(l=f(e,i))||l.enumerable});return o};var c=(o,e,n)=>(n=o!=null?p(w(o)):{},d(e||!o||!o.__esModule?a(n,\"default\",{value:o,enumerable:!0}):n,o)),q=o=>d(a({},\"__esModule\",{value:!0}),o);var r=I((v,h)=>{h.exports=_jsx_runtime});var A={};x(A,{default:()=>M});var s=c(r());var t=c(r());function u(o){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-ii\",children:\"Modal Dialog II\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-ii\",children:\"Modal Dialog II\"}),\", we built a functional modal dialog component that has the necessary \",(0,t.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties\",children:\"WAI-ARIA roles, states, and properties\"}),\". For a completely accessible modal dialog component, we should also add the \",(0,t.jsx)(e.a,{href:\"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#keyboardinteraction\",children:\"necessary keyboard interactions\"}),\".\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The required keyboard interactions will be done across this question and \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-iv\",children:\"Modal Dialog IV\"}),\". For this question, the focus is on implementing other convenient ways to close a modal dialog.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsx)(e.p,{children:'The current modal dialog can be dismissed by clicking on the \"Close\" button within the dialog contents. However, modal dialogs should also support other convenient ways of closing the dialog:'}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Clicking outside the modal dialog component (e.g. the overlay)\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Hitting the \",(0,t.jsx)(\"kbd\",{children:\"Escape\"}),\" key\"]}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"Add support for these interactions.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The focus of this question is on adding closing dialog functionality, not the styling and structure. The solution to \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-ii\",children:\"Modal Dialog II\"}),\" has been provided here for you to build on top of. You can reuse the existing styling and structure.\"]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,t.jsx)(e,Object.assign({},o,{children:(0,t.jsx)(u,o)})):u(o)}var g=j;function m(o){return(0,s.jsx)(g,{})}function D(o={}){let{wrapper:e}=o.components||{};return e?(0,s.jsx)(e,Object.assign({},o,{children:(0,s.jsx)(m,o)})):m(o)}var M=D;return q(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/modal-dialog-iv/metadata.json b/apps/web/src/__generated__/questions/user-interface/modal-dialog-iv/metadata.json
index 7baf9a8b1..86304f786 100644
--- a/apps/web/src/__generated__/questions/user-interface/modal-dialog-iv/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/modal-dialog-iv/metadata.json
@@ -30,5 +30,7 @@
   "slug": "modal-dialog-iv",
   "subtitle": null,
   "title": "Modal Dialog IV",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/modal-dialog/metadata.json b/apps/web/src/__generated__/questions/user-interface/modal-dialog/metadata.json
index db8994ab7..16acbb54b 100644
--- a/apps/web/src/__generated__/questions/user-interface/modal-dialog/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/modal-dialog/metadata.json
@@ -33,5 +33,7 @@
   "slug": "modal-dialog",
   "subtitle": null,
   "title": "Modal Dialog",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/modal-dialog/react/solution.json b/apps/web/src/__generated__/questions/user-interface/modal-dialog/react/solution.json
index b91e5a916..0c9446eeb 100644
--- a/apps/web/src/__generated__/questions/user-interface/modal-dialog/react/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/modal-dialog/react/solution.json
@@ -32,5 +32,5 @@
     "activeFile": "/src/ModalDialog.tsx",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var x=Object.create;var c=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var k=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),C=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of j(e))!D.call(t,a)&&a!==r&&c(t,a,{get:()=>e[a],enumerable:!(h=M(e,a))||h.enumerable});return t};var s=(t,e,r)=>(r=t!=null?x(_(t)):{},m(e||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),O=t=>m(c({},\"__esModule\",{value:!0}),t);var d=k((q,g)=>{g.exports=_jsx_runtime});var S={};C(S,{default:()=>R});var l=s(d());var n=s(d());function u(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",h3:\"h3\",ul:\"ul\",li:\"li\",ol:\"ol\",strong:\"strong\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modal dialogs can be implemented as both controlled and non-controlled components (the dialog controls its own closed state), but it is more commonly used as controlled components.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Since the modal dialog component does not contain that many elements, we can keep things simple and define a single \",(0,n.jsx)(e.code,{children:\"ModalDialog\"}),\" component.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Props\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"ModalDialog\"}),\" component takes the following props:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"title\"}),\": String to be shown at the top of the modal dialog.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"children\"}),\": The content to be displayed in the modal. It can either be a custom prop or \",(0,n.jsx)(e.code,{children:\"children\"}),\" prop, but the latter is a more common way to render contents.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"open\"}),\": A boolean to control the visibility of the modal (defaults to \",(0,n.jsx)(e.code,{children:\"false\"}),\"). If it is \",(0,n.jsx)(e.code,{children:\"false\"}),\", nothing is rendered to the DOM.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"onClose\"}),\": Callback triggered when the modal dialog is meant to be closed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"State\"}),`\n`,(0,n.jsx)(e.p,{children:\"Since the modal dialog component is a controlled component, given the current basic requirements there's no need for any state within the modal. However, the modal dialog is controlled externally and state is required outside to toggle the visibility of the modal.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Rendering and layout\"}),`\n`,(0,n.jsx)(e.p,{children:\"The key elements for the modal dialog are the (1) overlay, (2) modal dialog, (3) modal title:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overlay\"}),\": The overlay is meant to cover the whole screen. A combination of \",(0,n.jsx)(e.code,{children:\"position: fixed\"}),\" and \",(0,n.jsx)(e.code,{children:\"inset: 0\"}),\" will render the element to cover the entire screen. Set a semi-transparent color for the background, e.g. \",(0,n.jsx)(e.code,{children:\"rgba(0, 0, 0, 0.7)\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modal dialog\"}),\": The modal dialog can be placed within the overlay element. Centering the modal dialog on the screen is thus done by the overlay, which sets the contents to be centered within itself. There are multiple ways to achieve centering and the simplest modern way is to use \",(0,n.jsx)(e.code,{children:\"display: flex; align-items: center; justify-content: center\"}),\" styles.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modal title\"}),\": Modal dialogs represent a new context separate from the main page content. Using \",(0,n.jsx)(e.code,{children:\"<h1>\"}),\" establishes the modal's content as its own document outline, which clearly indicates the primary heading of this new context to screen readers.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Breaking out of DOM hierarchy\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rendering modal dialogs is tricky due to the fact that modals are being displayed over the page and does not follow the normal flow of page elements.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hence it is mandatory to render the modal outside of the DOM hierarchy of the parents. Otherwise, if the parents contain styling that clips its contents, the modal contents might not be fully visible. Here's an \",(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal\",children:\"example from the React docs demonstrating the issue\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In React, rendering outside the DOM hierarchy of the parent component can be achieved using \",(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/createPortal\",children:\"React Portals\"}),\". Other common use cases of portals include tooltips, dropdown menus, popovers.\"]})]})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=T;var o=s(d());function f(t){let e=Object.assign({h2:\"h2\",ol:\"ol\",li:\"li\",ul:\"ul\"},t.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Functionality:\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Opening and closing:\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Verify the modal opens when triggered\"}),`\n`,(0,o.jsx)(e.li,{children:\"Ensure the modal closes when the close button is clicked\"}),`\n`,(0,o.jsx)(e.li,{children:\"Test any other methods provided to open/close the modal (if applicable)\"}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Content customization:\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Test passing different title strings\"}),`\n`,(0,o.jsx)(e.li,{children:\"Verify various types of content in the body (text, HTML, React components)\"}),`\n`,(0,o.jsx)(e.li,{children:\"Ensure the close button is always present\"}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Overlay:\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Confirm the presence of a semi-transparent background overlay\"}),`\n`,(0,o.jsx)(e.li,{children:\"Verify the overlay covers the entire viewport\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Layout and positioning:\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Check if the modal is centered horizontally on different screen sizes\"}),`\n`,(0,o.jsx)(e.li,{children:\"Verify vertical centering on various screen heights\"}),`\n`,(0,o.jsx)(e.li,{children:\"Test centering with different modal content sizes\"}),`\n`]}),`\n`]}),`\n`]})]})}function A(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,Object.assign({},t,{children:(0,o.jsx)(f,t)})):f(t)}var y=A;var i=s(d());function b(t){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Accessibility (A11y)\"}),`\n`,(0,i.jsx)(e.p,{children:\"There are a lot of a11y considerations for modal dialogs, possibly too many to implement during interviews.\"}),`\n`,(0,i.jsx)(e.p,{children:\"For your knowledge, here are some of the more important ones:\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"ARIA attributes:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Use \",(0,i.jsx)(e.code,{children:'role=\"dialog\"'}),\" on the modal container.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Add \",(0,i.jsx)(e.code,{children:'aria-modal=\"true\"'}),\" to indicate that the modal is blocking interaction with the page content.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Use \",(0,i.jsx)(e.code,{children:\"aria-labelledby\"}),\" to associate the modal's title with the dialog.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Use \",(0,i.jsx)(e.code,{children:\"aria-describedby\"}),\" if there's additional descriptive text.\"]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Keyboard navigation:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Ensure the modal can be opened and closed using keyboard controls.\"}),`\n`,(0,i.jsxs)(e.li,{children:[\"Provide a way to close the modal using the \",(0,i.jsx)(\"kbd\",{children:\"Esc\"}),\" key.\"]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Focus management:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Set focus to the first focusable element in the modal when it opens.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Trap focus within the modal when it's open, preventing users from tabbing outside the modal.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Return focus to the triggering element when the modal closes.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,i.jsx)(e.p,{children:\"The subsequent questions will involve implementing these a11y considerations:\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-ii\",children:\"Modal Dialog II\"}),\": Adding ARIA attributes.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-iii\",children:\"Modal Dialog III\"}),\": Adding keyboard navigation.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-iv\",children:\"Modal Dialog IV\"}),\": Adding focus management.\"]}),`\n`]})]})}function F(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(b,t)})):b(t)}var w=F;function v(t){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(p,{}),`\n`,(0,l.jsx)(y,{}),`\n`,(0,l.jsx)(w,{})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,Object.assign({},t,{children:(0,l.jsx)(v,t)})):v(t)}var R=I;return O(S);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var x=Object.create;var c=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var k=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),C=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of j(e))!D.call(t,a)&&a!==r&&c(t,a,{get:()=>e[a],enumerable:!(h=M(e,a))||h.enumerable});return t};var s=(t,e,r)=>(r=t!=null?x(_(t)):{},m(e||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),O=t=>m(c({},\"__esModule\",{value:!0}),t);var d=k((q,g)=>{g.exports=_jsx_runtime});var S={};C(S,{default:()=>R});var l=s(d());var n=s(d());function u(t){let e=Object.assign({h2:\"h2\",p:\"p\",code:\"code\",h3:\"h3\",ul:\"ul\",li:\"li\",ol:\"ol\",strong:\"strong\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"Modal dialogs can be implemented as both controlled and non-controlled components (the dialog controls its own closed state), but it is more commonly used as controlled components.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Since the modal dialog component does not contain that many elements, we can keep things simple and define a single \",(0,n.jsx)(e.code,{children:\"ModalDialog\"}),\" component.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Props\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"ModalDialog\"}),\" component takes the following props:\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"title\"}),\": String to be shown at the top of the modal dialog.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"children\"}),\": The content to be displayed in the modal. It can either be a custom prop or \",(0,n.jsx)(e.code,{children:\"children\"}),\" prop, but the latter is a more common way to render contents.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"open\"}),\": A boolean to control the visibility of the modal (defaults to \",(0,n.jsx)(e.code,{children:\"false\"}),\"). If it is \",(0,n.jsx)(e.code,{children:\"false\"}),\", nothing is rendered to the DOM.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"onClose\"}),\": Callback triggered when the modal dialog is meant to be closed.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"State\"}),`\n`,(0,n.jsx)(e.p,{children:\"Since the modal dialog component is a controlled component, given the current basic requirements there's no need for any state within the modal. However, the modal dialog is controlled externally and state is required outside to toggle the visibility of the modal.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"Rendering and layout\"}),`\n`,(0,n.jsx)(e.p,{children:\"The key elements for the modal dialog are the (1) overlay, (2) modal dialog, (3) modal title:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Overlay\"}),\": The overlay is meant to cover the whole screen. A combination of \",(0,n.jsx)(e.code,{children:\"position: fixed\"}),\" and \",(0,n.jsx)(e.code,{children:\"inset: 0\"}),\" will render the element to cover the entire screen. Set a semi-transparent color for the background, e.g. \",(0,n.jsx)(e.code,{children:\"rgba(0, 0, 0, 0.7)\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modal dialog\"}),\": The modal dialog can be placed within the overlay element. Centering the modal dialog on the screen is thus done by the overlay, which sets the contents to be centered within itself. There are multiple ways to achieve centering and the simplest modern way is to use \",(0,n.jsx)(e.code,{children:\"display: flex; align-items: center; justify-content: center\"}),\" styles.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:\"Modal title\"}),\": Modal dialogs represent a new context separate from the main page content. Using \",(0,n.jsx)(e.code,{children:\"<h1>\"}),\" establishes the modal's content as its own document outline, which clearly indicates the primary heading of this new context to screen readers.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Breaking out of DOM hierarchy\"}),`\n`,(0,n.jsx)(e.p,{children:\"Rendering modal dialogs is tricky due to the fact that modals are being displayed over the page and does not follow the normal flow of page elements.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hence it is mandatory to render the modal outside of the DOM hierarchy of the parents. Otherwise, if the parents contain styling that clips its contents, the modal contents might not be fully visible. Here's an \",(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal\",children:\"example from the React docs demonstrating the issue\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In React, rendering outside the DOM hierarchy of the parent component can be achieved using \",(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/createPortal\",children:\"React Portals\"}),\". Other common use cases of portals include tooltips, dropdown menus, popovers.\"]})]})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(u,t)})):u(t)}var p=T;var o=s(d());function f(t){let e=Object.assign({h2:\"h2\",ol:\"ol\",li:\"li\",ul:\"ul\"},t.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Functionality:\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Opening and closing:\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Verify the modal opens when triggered\"}),`\n`,(0,o.jsx)(e.li,{children:\"Ensure the modal closes when the close button is clicked\"}),`\n`,(0,o.jsx)(e.li,{children:\"Test any other methods provided to open/close the modal (if applicable)\"}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Content customization:\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Test passing different title strings\"}),`\n`,(0,o.jsx)(e.li,{children:\"Verify various types of content in the body (text, HTML, React components)\"}),`\n`,(0,o.jsx)(e.li,{children:\"Ensure the close button is always present\"}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Overlay:\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Confirm the presence of a semi-transparent background overlay\"}),`\n`,(0,o.jsx)(e.li,{children:\"Verify the overlay covers the entire viewport\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Layout and positioning:\",`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:\"Check if the modal is centered horizontally on different screen sizes\"}),`\n`,(0,o.jsx)(e.li,{children:\"Verify vertical centering on various screen heights\"}),`\n`,(0,o.jsx)(e.li,{children:\"Test centering with different modal content sizes\"}),`\n`]}),`\n`]}),`\n`]})]})}function A(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,Object.assign({},t,{children:(0,o.jsx)(f,t)})):f(t)}var y=A;var i=s(d());function b(t){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Accessibility\"}),`\n`,(0,i.jsx)(e.p,{children:\"There are a lot of a11y considerations for modal dialogs, possibly too many to implement during interviews.\"}),`\n`,(0,i.jsx)(e.p,{children:\"For your knowledge, here are some of the more important ones:\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"ARIA attributes:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Use \",(0,i.jsx)(e.code,{children:'role=\"dialog\"'}),\" on the modal container.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Add \",(0,i.jsx)(e.code,{children:'aria-modal=\"true\"'}),\" to indicate that the modal is blocking interaction with the page content.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Use \",(0,i.jsx)(e.code,{children:\"aria-labelledby\"}),\" to associate the modal's title with the dialog.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Use \",(0,i.jsx)(e.code,{children:\"aria-describedby\"}),\" if there's additional descriptive text.\"]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Keyboard navigation:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Ensure the modal can be opened and closed using keyboard controls.\"}),`\n`,(0,i.jsxs)(e.li,{children:[\"Provide a way to close the modal using the \",(0,i.jsx)(\"kbd\",{children:\"Esc\"}),\" key.\"]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Focus management:\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Set focus to the first focusable element in the modal when it opens.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Trap focus within the modal when it's open, preventing users from tabbing outside the modal.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Return focus to the triggering element when the modal closes.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,i.jsx)(e.p,{children:\"The subsequent questions will involve implementing these a11y considerations:\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-ii\",children:\"Modal Dialog II\"}),\": Adding ARIA attributes.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-iii\",children:\"Modal Dialog III\"}),\": Adding keyboard navigation.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.a,{href:\"/questions/user-interface/modal-dialog-iv\",children:\"Modal Dialog IV\"}),\": Adding focus management.\"]}),`\n`]})]})}function F(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(b,t)})):b(t)}var w=F;function v(t){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(p,{}),`\n`,(0,l.jsx)(y,{}),`\n`,(0,l.jsx)(w,{})]})}function I(t={}){let{wrapper:e}=t.components||{};return e?(0,l.jsx)(e,Object.assign({},t,{children:(0,l.jsx)(v,t)})):v(t)}var R=I;return O(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/pixel-art/angular/skeleton.json b/apps/web/src/__generated__/questions/user-interface/pixel-art/angular/skeleton.json
index 0afeb2cdb..a1d3a5ea1 100644
--- a/apps/web/src/__generated__/questions/user-interface/pixel-art/angular/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/pixel-art/angular/skeleton.json
@@ -47,5 +47,5 @@
     "activeFile": "/src/app/app.component.ts",
     "environment": "angular-cli"
   },
-  "writeup": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),j=(l,e)=>{for(var i in e)c(l,i,{get:e[i],enumerable:!0})},o=(l,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!b.call(l,r)&&r!==i&&c(l,r,{get:()=>e[r],enumerable:!(a=g(e,r))||a.enumerable});return l};var h=(l,e,i)=>(i=l!=null?f(w(l)):{},o(e||!l||!l.__esModule?c(i,\"default\",{value:l,enumerable:!0}):i,l)),C=l=>o(c({},\"__esModule\",{value:!0}),l);var d=v((B,s)=>{s.exports=_jsx_runtime});var M={};j(M,{default:()=>_});var t=h(d());var n=h(d());function u(l){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a pixel art drawing tool where users can paint pixels with selected colors and also erase colored pixels.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/pixel-art/pixel-art-example.png\",alt:\"Pixel art example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Canvas\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A 15 x 15 grid of cells. Each cell is 20px x 20px.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Pixels alternate between white and gray.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Modes\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'There are 2 modes available: \"Draw\" and \"Erase\"'}),`\n`,(0,n.jsx)(e.li,{children:\"Clicking on the individual tab item will activate the respective mode.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Colorpicker\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A color can be selected from the list of colors. Selected colors will have a black border to indicate the selected state.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Drawing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with paint it with the currently-selected color.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas will fill the underlying pixel with the selected color.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Erasing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with remove any color from that cell.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas while this mode is selected will remove colors from that cell.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Colors:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"White: \",(0,n.jsx)(e.code,{children:\"#ffffff\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Gray: \",(0,n.jsx)(e.code,{children:\"#e9ecef\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Red: \",(0,n.jsx)(e.code,{children:\"#cc0001\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Orange: \",(0,n.jsx)(e.code,{children:\"#fb940b\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Yellow: \",(0,n.jsx)(e.code,{children:\"#ffff01\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Green: \",(0,n.jsx)(e.code,{children:\"#01cc00\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Teal: \",(0,n.jsx)(e.code,{children:\"#38d9a9\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Blue: \",(0,n.jsx)(e.code,{children:\"#228be6\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Purple: \",(0,n.jsx)(e.code,{children:\"#7950f2\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Beige: \",(0,n.jsx)(e.code,{children:\"#ff8787\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is adapted from \",(0,n.jsx)(e.a,{href:\"https://sadanandpai.github.io/frontend-mini-challenges/src/mc/pixel-art/\",children:\"Front End Mini Challenges\"}),\".\"]})]})}function D(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(u,l)})):u(l)}var m=D;function p(l){return(0,t.jsx)(m,{})}function y(l={}){let{wrapper:e}=l.components||{};return e?(0,t.jsx)(e,Object.assign({},l,{children:(0,t.jsx)(p,l)})):p(l)}var _=y;return C(M);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),j=(l,e)=>{for(var i in e)c(l,i,{get:e[i],enumerable:!0})},o=(l,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!b.call(l,r)&&r!==i&&c(l,r,{get:()=>e[r],enumerable:!(a=g(e,r))||a.enumerable});return l};var h=(l,e,i)=>(i=l!=null?f(w(l)):{},o(e||!l||!l.__esModule?c(i,\"default\",{value:l,enumerable:!0}):i,l)),C=l=>o(c({},\"__esModule\",{value:!0}),l);var d=v((B,s)=>{s.exports=_jsx_runtime});var M={};j(M,{default:()=>_});var t=h(d());var n=h(d());function u(l){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a pixel art drawing tool where users can paint pixels with selected colors and also erase colored pixels.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/pixel-art/pixel-art-example.png\",alt:\"Pixel art example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Canvas\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A 15 x 15 grid of cells. Each cell is 20px x 20px.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Pixels alternate between white and gray.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Modes\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'There are 2 modes available: \"Draw\" and \"Erase\"'}),`\n`,(0,n.jsx)(e.li,{children:\"Clicking on the individual tab item will activate the respective mode.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Colorpicker\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A color can be selected from the list of colors. Selected colors will have a black border to indicate the selected state.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Drawing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with paint it with the currently-selected color.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas will fill the underlying pixel with the selected color.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Erasing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with remove any color from that cell.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas while this mode is selected will remove colors from that cell.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Colors:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"White: \",(0,n.jsx)(e.code,{children:\"#ffffff\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Gray: \",(0,n.jsx)(e.code,{children:\"#e9ecef\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Red: \",(0,n.jsx)(e.code,{children:\"#cc0001\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Orange: \",(0,n.jsx)(e.code,{children:\"#fb940b\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Yellow: \",(0,n.jsx)(e.code,{children:\"#ffff01\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Green: \",(0,n.jsx)(e.code,{children:\"#01cc00\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Teal: \",(0,n.jsx)(e.code,{children:\"#38d9a9\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Blue: \",(0,n.jsx)(e.code,{children:\"#228be6\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Purple: \",(0,n.jsx)(e.code,{children:\"#7950f2\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Beige: \",(0,n.jsx)(e.code,{children:\"#ff8787\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is adapted from \",(0,n.jsx)(e.a,{href:\"https://sadanandpai.github.io/frontend-mini-challenges/src/mc/pixel-art/\",children:\"Front End Mini Challenges\"}),\".\"]})]})}function y(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(u,l)})):u(l)}var m=y;function p(l){return(0,t.jsx)(m,{})}function D(l={}){let{wrapper:e}=l.components||{};return e?(0,t.jsx)(e,Object.assign({},l,{children:(0,t.jsx)(p,l)})):p(l)}var _=D;return C(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/pixel-art/metadata.json b/apps/web/src/__generated__/questions/user-interface/pixel-art/metadata.json
index 34ea44fd8..1a657b0d1 100644
--- a/apps/web/src/__generated__/questions/user-interface/pixel-art/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/pixel-art/metadata.json
@@ -41,5 +41,7 @@
   "slug": "pixel-art",
   "subtitle": null,
   "title": "Pixel Art",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/pixel-art/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/pixel-art/react/skeleton.json
index 98fdef9bd..b24519516 100644
--- a/apps/web/src/__generated__/questions/user-interface/pixel-art/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/pixel-art/react/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),j=(l,e)=>{for(var i in e)c(l,i,{get:e[i],enumerable:!0})},o=(l,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!b.call(l,r)&&r!==i&&c(l,r,{get:()=>e[r],enumerable:!(a=g(e,r))||a.enumerable});return l};var h=(l,e,i)=>(i=l!=null?f(w(l)):{},o(e||!l||!l.__esModule?c(i,\"default\",{value:l,enumerable:!0}):i,l)),C=l=>o(c({},\"__esModule\",{value:!0}),l);var d=v((B,s)=>{s.exports=_jsx_runtime});var M={};j(M,{default:()=>_});var t=h(d());var n=h(d());function u(l){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a pixel art drawing tool where users can paint pixels with selected colors and also erase colored pixels.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/pixel-art/pixel-art-example.png\",alt:\"Pixel art example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Canvas\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A 15 x 15 grid of cells. Each cell is 20px x 20px.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Pixels alternate between white and gray.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Modes\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'There are 2 modes available: \"Draw\" and \"Erase\"'}),`\n`,(0,n.jsx)(e.li,{children:\"Clicking on the individual tab item will activate the respective mode.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Colorpicker\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A color can be selected from the list of colors. Selected colors will have a black border to indicate the selected state.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Drawing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with paint it with the currently-selected color.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas will fill the underlying pixel with the selected color.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Erasing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with remove any color from that cell.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas while this mode is selected will remove colors from that cell.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Colors:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"White: \",(0,n.jsx)(e.code,{children:\"#ffffff\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Gray: \",(0,n.jsx)(e.code,{children:\"#e9ecef\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Red: \",(0,n.jsx)(e.code,{children:\"#cc0001\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Orange: \",(0,n.jsx)(e.code,{children:\"#fb940b\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Yellow: \",(0,n.jsx)(e.code,{children:\"#ffff01\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Green: \",(0,n.jsx)(e.code,{children:\"#01cc00\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Teal: \",(0,n.jsx)(e.code,{children:\"#38d9a9\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Blue: \",(0,n.jsx)(e.code,{children:\"#228be6\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Purple: \",(0,n.jsx)(e.code,{children:\"#7950f2\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Beige: \",(0,n.jsx)(e.code,{children:\"#ff8787\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is adapted from \",(0,n.jsx)(e.a,{href:\"https://sadanandpai.github.io/frontend-mini-challenges/src/mc/pixel-art/\",children:\"Front End Mini Challenges\"}),\".\"]})]})}function D(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(u,l)})):u(l)}var m=D;function p(l){return(0,t.jsx)(m,{})}function y(l={}){let{wrapper:e}=l.components||{};return e?(0,t.jsx)(e,Object.assign({},l,{children:(0,t.jsx)(p,l)})):p(l)}var _=y;return C(M);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),j=(l,e)=>{for(var i in e)c(l,i,{get:e[i],enumerable:!0})},o=(l,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!b.call(l,r)&&r!==i&&c(l,r,{get:()=>e[r],enumerable:!(a=g(e,r))||a.enumerable});return l};var h=(l,e,i)=>(i=l!=null?f(w(l)):{},o(e||!l||!l.__esModule?c(i,\"default\",{value:l,enumerable:!0}):i,l)),C=l=>o(c({},\"__esModule\",{value:!0}),l);var d=v((B,s)=>{s.exports=_jsx_runtime});var M={};j(M,{default:()=>_});var t=h(d());var n=h(d());function u(l){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a pixel art drawing tool where users can paint pixels with selected colors and also erase colored pixels.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/pixel-art/pixel-art-example.png\",alt:\"Pixel art example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Canvas\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A 15 x 15 grid of cells. Each cell is 20px x 20px.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Pixels alternate between white and gray.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Modes\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'There are 2 modes available: \"Draw\" and \"Erase\"'}),`\n`,(0,n.jsx)(e.li,{children:\"Clicking on the individual tab item will activate the respective mode.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Colorpicker\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A color can be selected from the list of colors. Selected colors will have a black border to indicate the selected state.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Drawing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with paint it with the currently-selected color.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas will fill the underlying pixel with the selected color.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Erasing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with remove any color from that cell.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas while this mode is selected will remove colors from that cell.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Colors:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"White: \",(0,n.jsx)(e.code,{children:\"#ffffff\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Gray: \",(0,n.jsx)(e.code,{children:\"#e9ecef\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Red: \",(0,n.jsx)(e.code,{children:\"#cc0001\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Orange: \",(0,n.jsx)(e.code,{children:\"#fb940b\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Yellow: \",(0,n.jsx)(e.code,{children:\"#ffff01\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Green: \",(0,n.jsx)(e.code,{children:\"#01cc00\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Teal: \",(0,n.jsx)(e.code,{children:\"#38d9a9\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Blue: \",(0,n.jsx)(e.code,{children:\"#228be6\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Purple: \",(0,n.jsx)(e.code,{children:\"#7950f2\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Beige: \",(0,n.jsx)(e.code,{children:\"#ff8787\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is adapted from \",(0,n.jsx)(e.a,{href:\"https://sadanandpai.github.io/frontend-mini-challenges/src/mc/pixel-art/\",children:\"Front End Mini Challenges\"}),\".\"]})]})}function y(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(u,l)})):u(l)}var m=y;function p(l){return(0,t.jsx)(m,{})}function D(l={}){let{wrapper:e}=l.components||{};return e?(0,t.jsx)(e,Object.assign({},l,{children:(0,t.jsx)(p,l)})):p(l)}var _=D;return C(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/pixel-art/svelte/skeleton.json b/apps/web/src/__generated__/questions/user-interface/pixel-art/svelte/skeleton.json
index e1271d468..b607e0554 100644
--- a/apps/web/src/__generated__/questions/user-interface/pixel-art/svelte/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/pixel-art/svelte/skeleton.json
@@ -24,5 +24,5 @@
     "activeFile": "/src/App.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),j=(l,e)=>{for(var i in e)c(l,i,{get:e[i],enumerable:!0})},o=(l,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!b.call(l,r)&&r!==i&&c(l,r,{get:()=>e[r],enumerable:!(a=g(e,r))||a.enumerable});return l};var h=(l,e,i)=>(i=l!=null?f(w(l)):{},o(e||!l||!l.__esModule?c(i,\"default\",{value:l,enumerable:!0}):i,l)),C=l=>o(c({},\"__esModule\",{value:!0}),l);var d=v((B,s)=>{s.exports=_jsx_runtime});var M={};j(M,{default:()=>_});var t=h(d());var n=h(d());function u(l){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a pixel art drawing tool where users can paint pixels with selected colors and also erase colored pixels.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/pixel-art/pixel-art-example.png\",alt:\"Pixel art example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Canvas\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A 15 x 15 grid of cells. Each cell is 20px x 20px.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Pixels alternate between white and gray.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Modes\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'There are 2 modes available: \"Draw\" and \"Erase\"'}),`\n`,(0,n.jsx)(e.li,{children:\"Clicking on the individual tab item will activate the respective mode.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Colorpicker\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A color can be selected from the list of colors. Selected colors will have a black border to indicate the selected state.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Drawing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with paint it with the currently-selected color.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas will fill the underlying pixel with the selected color.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Erasing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with remove any color from that cell.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas while this mode is selected will remove colors from that cell.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Colors:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"White: \",(0,n.jsx)(e.code,{children:\"#ffffff\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Gray: \",(0,n.jsx)(e.code,{children:\"#e9ecef\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Red: \",(0,n.jsx)(e.code,{children:\"#cc0001\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Orange: \",(0,n.jsx)(e.code,{children:\"#fb940b\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Yellow: \",(0,n.jsx)(e.code,{children:\"#ffff01\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Green: \",(0,n.jsx)(e.code,{children:\"#01cc00\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Teal: \",(0,n.jsx)(e.code,{children:\"#38d9a9\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Blue: \",(0,n.jsx)(e.code,{children:\"#228be6\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Purple: \",(0,n.jsx)(e.code,{children:\"#7950f2\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Beige: \",(0,n.jsx)(e.code,{children:\"#ff8787\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is adapted from \",(0,n.jsx)(e.a,{href:\"https://sadanandpai.github.io/frontend-mini-challenges/src/mc/pixel-art/\",children:\"Front End Mini Challenges\"}),\".\"]})]})}function D(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(u,l)})):u(l)}var m=D;function p(l){return(0,t.jsx)(m,{})}function y(l={}){let{wrapper:e}=l.components||{};return e?(0,t.jsx)(e,Object.assign({},l,{children:(0,t.jsx)(p,l)})):p(l)}var _=y;return C(M);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),j=(l,e)=>{for(var i in e)c(l,i,{get:e[i],enumerable:!0})},o=(l,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!b.call(l,r)&&r!==i&&c(l,r,{get:()=>e[r],enumerable:!(a=g(e,r))||a.enumerable});return l};var h=(l,e,i)=>(i=l!=null?f(w(l)):{},o(e||!l||!l.__esModule?c(i,\"default\",{value:l,enumerable:!0}):i,l)),C=l=>o(c({},\"__esModule\",{value:!0}),l);var d=v((B,s)=>{s.exports=_jsx_runtime});var M={};j(M,{default:()=>_});var t=h(d());var n=h(d());function u(l){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a pixel art drawing tool where users can paint pixels with selected colors and also erase colored pixels.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/pixel-art/pixel-art-example.png\",alt:\"Pixel art example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Canvas\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A 15 x 15 grid of cells. Each cell is 20px x 20px.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Pixels alternate between white and gray.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Modes\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'There are 2 modes available: \"Draw\" and \"Erase\"'}),`\n`,(0,n.jsx)(e.li,{children:\"Clicking on the individual tab item will activate the respective mode.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Colorpicker\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A color can be selected from the list of colors. Selected colors will have a black border to indicate the selected state.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Drawing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with paint it with the currently-selected color.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas will fill the underlying pixel with the selected color.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Erasing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with remove any color from that cell.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas while this mode is selected will remove colors from that cell.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Colors:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"White: \",(0,n.jsx)(e.code,{children:\"#ffffff\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Gray: \",(0,n.jsx)(e.code,{children:\"#e9ecef\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Red: \",(0,n.jsx)(e.code,{children:\"#cc0001\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Orange: \",(0,n.jsx)(e.code,{children:\"#fb940b\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Yellow: \",(0,n.jsx)(e.code,{children:\"#ffff01\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Green: \",(0,n.jsx)(e.code,{children:\"#01cc00\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Teal: \",(0,n.jsx)(e.code,{children:\"#38d9a9\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Blue: \",(0,n.jsx)(e.code,{children:\"#228be6\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Purple: \",(0,n.jsx)(e.code,{children:\"#7950f2\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Beige: \",(0,n.jsx)(e.code,{children:\"#ff8787\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is adapted from \",(0,n.jsx)(e.a,{href:\"https://sadanandpai.github.io/frontend-mini-challenges/src/mc/pixel-art/\",children:\"Front End Mini Challenges\"}),\".\"]})]})}function y(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(u,l)})):u(l)}var m=y;function p(l){return(0,t.jsx)(m,{})}function D(l={}){let{wrapper:e}=l.components||{};return e?(0,t.jsx)(e,Object.assign({},l,{children:(0,t.jsx)(p,l)})):p(l)}var _=D;return C(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/pixel-art/vue/skeleton.json b/apps/web/src/__generated__/questions/user-interface/pixel-art/vue/skeleton.json
index 6b0fd4feb..4a35fac96 100644
--- a/apps/web/src/__generated__/questions/user-interface/pixel-art/vue/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/pixel-art/vue/skeleton.json
@@ -24,5 +24,5 @@
     "activeFile": "/src/App.vue",
     "environment": "vue-cli"
   },
-  "writeup": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),j=(l,e)=>{for(var i in e)c(l,i,{get:e[i],enumerable:!0})},o=(l,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!b.call(l,r)&&r!==i&&c(l,r,{get:()=>e[r],enumerable:!(a=g(e,r))||a.enumerable});return l};var h=(l,e,i)=>(i=l!=null?f(w(l)):{},o(e||!l||!l.__esModule?c(i,\"default\",{value:l,enumerable:!0}):i,l)),C=l=>o(c({},\"__esModule\",{value:!0}),l);var d=v((B,s)=>{s.exports=_jsx_runtime});var M={};j(M,{default:()=>_});var t=h(d());var n=h(d());function u(l){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a pixel art drawing tool where users can paint pixels with selected colors and also erase colored pixels.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/pixel-art/pixel-art-example.png\",alt:\"Pixel art example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Canvas\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A 15 x 15 grid of cells. Each cell is 20px x 20px.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Pixels alternate between white and gray.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Modes\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'There are 2 modes available: \"Draw\" and \"Erase\"'}),`\n`,(0,n.jsx)(e.li,{children:\"Clicking on the individual tab item will activate the respective mode.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Colorpicker\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A color can be selected from the list of colors. Selected colors will have a black border to indicate the selected state.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Drawing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with paint it with the currently-selected color.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas will fill the underlying pixel with the selected color.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Erasing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with remove any color from that cell.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas while this mode is selected will remove colors from that cell.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Colors:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"White: \",(0,n.jsx)(e.code,{children:\"#ffffff\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Gray: \",(0,n.jsx)(e.code,{children:\"#e9ecef\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Red: \",(0,n.jsx)(e.code,{children:\"#cc0001\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Orange: \",(0,n.jsx)(e.code,{children:\"#fb940b\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Yellow: \",(0,n.jsx)(e.code,{children:\"#ffff01\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Green: \",(0,n.jsx)(e.code,{children:\"#01cc00\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Teal: \",(0,n.jsx)(e.code,{children:\"#38d9a9\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Blue: \",(0,n.jsx)(e.code,{children:\"#228be6\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Purple: \",(0,n.jsx)(e.code,{children:\"#7950f2\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Beige: \",(0,n.jsx)(e.code,{children:\"#ff8787\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is adapted from \",(0,n.jsx)(e.a,{href:\"https://sadanandpai.github.io/frontend-mini-challenges/src/mc/pixel-art/\",children:\"Front End Mini Challenges\"}),\".\"]})]})}function D(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(u,l)})):u(l)}var m=D;function p(l){return(0,t.jsx)(m,{})}function y(l={}){let{wrapper:e}=l.components||{};return e?(0,t.jsx)(e,Object.assign({},l,{children:(0,t.jsx)(p,l)})):p(l)}var _=y;return C(M);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),j=(l,e)=>{for(var i in e)c(l,i,{get:e[i],enumerable:!0})},o=(l,e,i,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!b.call(l,r)&&r!==i&&c(l,r,{get:()=>e[r],enumerable:!(a=g(e,r))||a.enumerable});return l};var h=(l,e,i)=>(i=l!=null?f(w(l)):{},o(e||!l||!l.__esModule?c(i,\"default\",{value:l,enumerable:!0}):i,l)),C=l=>o(c({},\"__esModule\",{value:!0}),l);var d=v((B,s)=>{s.exports=_jsx_runtime});var M={};j(M,{default:()=>_});var t=h(d());var n=h(d());function u(l){let e=Object.assign({p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\",a:\"a\"},l.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Build a pixel art drawing tool where users can paint pixels with selected colors and also erase colored pixels.\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/questions/pixel-art/pixel-art-example.png\",alt:\"Pixel art example\"})}),`\n`,(0,n.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Canvas\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A 15 x 15 grid of cells. Each cell is 20px x 20px.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Pixels alternate between white and gray.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Modes\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'There are 2 modes available: \"Draw\" and \"Erase\"'}),`\n`,(0,n.jsx)(e.li,{children:\"Clicking on the individual tab item will activate the respective mode.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Colorpicker\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"A color can be selected from the list of colors. Selected colors will have a black border to indicate the selected state.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Drawing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with paint it with the currently-selected color.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas will fill the underlying pixel with the selected color.\"}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Erasing mode\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Clicking on a cell with remove any color from that cell.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Dragging on the canvas while this mode is selected will remove colors from that cell.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Colors:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"White: \",(0,n.jsx)(e.code,{children:\"#ffffff\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Gray: \",(0,n.jsx)(e.code,{children:\"#e9ecef\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Red: \",(0,n.jsx)(e.code,{children:\"#cc0001\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Orange: \",(0,n.jsx)(e.code,{children:\"#fb940b\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Yellow: \",(0,n.jsx)(e.code,{children:\"#ffff01\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Green: \",(0,n.jsx)(e.code,{children:\"#01cc00\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Teal: \",(0,n.jsx)(e.code,{children:\"#38d9a9\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Blue: \",(0,n.jsx)(e.code,{children:\"#228be6\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Purple: \",(0,n.jsx)(e.code,{children:\"#7950f2\"})]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Beige: \",(0,n.jsx)(e.code,{children:\"#ff8787\"})]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Source\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"This question is adapted from \",(0,n.jsx)(e.a,{href:\"https://sadanandpai.github.io/frontend-mini-challenges/src/mc/pixel-art/\",children:\"Front End Mini Challenges\"}),\".\"]})]})}function y(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(u,l)})):u(l)}var m=y;function p(l){return(0,t.jsx)(m,{})}function D(l={}){let{wrapper:e}=l.components||{};return e?(0,t.jsx)(e,Object.assign({},l,{children:(0,t.jsx)(p,l)})):p(l)}var _=D;return C(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/progress-bars-ii/metadata.json b/apps/web/src/__generated__/questions/user-interface/progress-bars-ii/metadata.json
index fee2ab607..a1191867b 100644
--- a/apps/web/src/__generated__/questions/user-interface/progress-bars-ii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/progress-bars-ii/metadata.json
@@ -33,5 +33,7 @@
   "slug": "progress-bars-ii",
   "subtitle": null,
   "title": "Progress Bars II",
-  "topics": []
+  "topics": [
+    "async"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/progress-bars-ii/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/progress-bars-ii/react/skeleton.json
index e36f8f2a0..e2345b05a 100644
--- a/apps/web/src/__generated__/questions/user-interface/progress-bars-ii/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/progress-bars-ii/react/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),_=(r,e)=>{for(var t in e)i(r,t,{get:e[t],enumerable:!0})},c=(r,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of b(e))!y.call(r,n)&&n!==t&&i(r,n,{get:()=>e[n],enumerable:!(l=f(e,n))||l.enumerable});return r};var u=(r,e,t)=>(t=r!=null?m(x(r)):{},c(e||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),q=r=>c(i({},\"__esModule\",{value:!0}),r);var o=j((C,p)=>{p.exports=_jsx_runtime});var k={};_(k,{default:()=>M});var a=u(o());var s=u(o());function d(r){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\"},r.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,s.jsx)(e.a,{href:\"/questions/user-interface/progress-bars\",children:\"Progress Bars\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,s.jsx)(e.p,{children:'Build an app where clicking the \"Add\" button adds progress bars to the page. The progress bars fill up in series, aka the second bar only starts filling up after the first bar is completely filled.'}),`\n`,(0,s.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:'Clicking on the \"Add\" button adds a progress bar to the page.'}),`\n`,(0,s.jsx)(e.li,{children:\"The progress bars fill up gradually in sequence, one at a time. i.e. the second progress bar will only starts filling up after the first progress bar is completely filled up.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Each bar takes approximately 2000ms to completely fill up.\"}),`\n`]}),`\n`,(0,s.jsx)(e.h2,{children:\"Example\"}),`\n`,(0,s.jsx)(e.p,{children:(0,s.jsx)(e.img,{src:\"/img/questions/progress-bars-ii/progress-bars-example.png\",alt:\"Progress Bars Example\"})})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,s.jsx)(e,Object.assign({},r,{children:(0,s.jsx)(d,r)})):d(r)}var g=w;function h(r){return(0,a.jsx)(g,{})}function D(r={}){let{wrapper:e}=r.components||{};return e?(0,a.jsx)(e,Object.assign({},r,{children:(0,a.jsx)(h,r)})):h(r)}var M=D;return q(k);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var j=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),_=(r,e)=>{for(var t in e)i(r,t,{get:e[t],enumerable:!0})},c=(r,e,t,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of b(e))!y.call(r,n)&&n!==t&&i(r,n,{get:()=>e[n],enumerable:!(l=f(e,n))||l.enumerable});return r};var p=(r,e,t)=>(t=r!=null?m(x(r)):{},c(e||!r||!r.__esModule?i(t,\"default\",{value:r,enumerable:!0}):t,r)),q=r=>c(i({},\"__esModule\",{value:!0}),r);var o=j((C,u)=>{u.exports=_jsx_runtime});var k={};_(k,{default:()=>M});var a=p(o());var s=p(o());function d(r){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\"},r.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,s.jsx)(e.a,{href:\"/questions/user-interface/progress-bars\",children:\"Progress Bars\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,s.jsx)(e.p,{children:'Build an app where clicking the \"Add\" button adds progress bars to the page. The progress bars fill up in series, aka the second bar only starts filling up after the first bar is completely filled.'}),`\n`,(0,s.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:'Clicking on the \"Add\" button adds a progress bar to the page.'}),`\n`,(0,s.jsx)(e.li,{children:\"The progress bars fill up gradually in sequence, one at a time. i.e. the second progress bar will only starts filling up after the first progress bar is completely filled up.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Each bar takes approximately 2000ms to completely fill up.\"}),`\n`]}),`\n`,(0,s.jsx)(e.h2,{children:\"Example\"}),`\n`,(0,s.jsx)(e.p,{children:(0,s.jsx)(e.img,{src:\"/img/questions/progress-bars-ii/progress-bars-example.png\",alt:\"Progress Bars Example\"})})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,s.jsx)(e,Object.assign({},r,{children:(0,s.jsx)(d,r)})):d(r)}var g=w;function h(r){return(0,a.jsx)(g,{})}function D(r={}){let{wrapper:e}=r.components||{};return e?(0,a.jsx)(e,Object.assign({},r,{children:(0,a.jsx)(h,r)})):h(r)}var M=D;return q(k);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/progress-bars-iii/metadata.json b/apps/web/src/__generated__/questions/user-interface/progress-bars-iii/metadata.json
index c1abf60a5..3efbfbdeb 100644
--- a/apps/web/src/__generated__/questions/user-interface/progress-bars-iii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/progress-bars-iii/metadata.json
@@ -33,5 +33,7 @@
   "slug": "progress-bars-iii",
   "subtitle": null,
   "title": "Progress Bars III",
-  "topics": []
+  "topics": [
+    "async"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/progress-bars-iii/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/progress-bars-iii/react/skeleton.json
index bf86619c3..b26991329 100644
--- a/apps/web/src/__generated__/questions/user-interface/progress-bars-iii/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/progress-bars-iii/react/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var q=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),I=(r,e)=>{for(var s in e)i(r,s,{get:e[s],enumerable:!0})},u=(r,e,s,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of b(e))!y.call(r,n)&&n!==s&&i(r,n,{get:()=>e[n],enumerable:!(l=m(e,n))||l.enumerable});return r};var c=(r,e,s)=>(s=r!=null?d(x(r)):{},u(e||!r||!r.__esModule?i(s,\"default\",{value:r,enumerable:!0}):s,r)),j=r=>u(i({},\"__esModule\",{value:!0}),r);var a=q((C,h)=>{h.exports=_jsx_runtime});var D={};I(D,{default:()=>B});var o=c(a());var t=c(a());function p(r){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},r.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-ii\",children:\"Progress Bars II\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-ii\",children:\"Progress Bars II\"}),\", we built progress bars which fill up in sequence, one at a time. In this question, we'll build progress bars where multiple of them are filling up concurrently, up to a limit of 3. The fourth progress bar only starts filling up after the third one is full.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:'Clicking on the \"Add\" button adds a progress bar to the page.'}),`\n`,(0,t.jsx)(e.li,{children:\"The progress bars fill up gradually in parallel, up to a limit of 3 concurrent bars filling up. i.e. the fourth progress bar will only start filling up after the third progress bar is completely filled up.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Each bar takes approximately 2000ms to completely fill up.\"}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"Hint:\"}),\" Realize that changing the concurrency limit to 1 reduces this question into the simpler \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-ii\",children:\"Progress Bars II\"}),\" question. The solution to this question only requires a one-line change of the solution to \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-ii/solution\",children:\"Progress Bars II\"}),\".\"]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,t.jsx)(e,Object.assign({},r,{children:(0,t.jsx)(p,r)})):p(r)}var f=w;function g(r){return(0,o.jsx)(f,{})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,o.jsx)(e,Object.assign({},r,{children:(0,o.jsx)(g,r)})):g(r)}var B=_;return j(D);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var q=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),I=(r,e)=>{for(var s in e)i(r,s,{get:e[s],enumerable:!0})},u=(r,e,s,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of b(e))!x.call(r,n)&&n!==s&&i(r,n,{get:()=>e[n],enumerable:!(l=m(e,n))||l.enumerable});return r};var c=(r,e,s)=>(s=r!=null?d(y(r)):{},u(e||!r||!r.__esModule?i(s,\"default\",{value:r,enumerable:!0}):s,r)),j=r=>u(i({},\"__esModule\",{value:!0}),r);var a=q((C,h)=>{h.exports=_jsx_runtime});var D={};I(D,{default:()=>B});var o=c(a());var t=c(a());function p(r){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\"},r.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-ii\",children:\"Progress Bars II\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-ii\",children:\"Progress Bars II\"}),\", we built progress bars which fill up in sequence, one at a time. In this question, we'll build progress bars where multiple of them are filling up concurrently, up to a limit of 3. The fourth progress bar only starts filling up after the third one is full.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:'Clicking on the \"Add\" button adds a progress bar to the page.'}),`\n`,(0,t.jsx)(e.li,{children:\"The progress bars fill up gradually in parallel, up to a limit of 3 concurrent bars filling up. i.e. the fourth progress bar will only start filling up after the third progress bar is completely filled up.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Each bar takes approximately 2000ms to completely fill up.\"}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"Hint:\"}),\" Realize that changing the concurrency limit to 1 reduces this question into the simpler \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-ii\",children:\"Progress Bars II\"}),\" question. The solution to this question only requires a one-line change of the solution to \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-ii/solution\",children:\"Progress Bars II\"}),\".\"]})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,t.jsx)(e,Object.assign({},r,{children:(0,t.jsx)(p,r)})):p(r)}var f=w;function g(r){return(0,o.jsx)(f,{})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,o.jsx)(e,Object.assign({},r,{children:(0,o.jsx)(g,r)})):g(r)}var B=_;return j(D);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/progress-bars-iv/metadata.json b/apps/web/src/__generated__/questions/user-interface/progress-bars-iv/metadata.json
index dc38f5883..baa119a91 100644
--- a/apps/web/src/__generated__/questions/user-interface/progress-bars-iv/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/progress-bars-iv/metadata.json
@@ -31,5 +31,7 @@
   "slug": "progress-bars-iv",
   "subtitle": null,
   "title": "Progress Bars IV",
-  "topics": []
+  "topics": [
+    "async"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/progress-bars-iv/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/progress-bars-iv/react/skeleton.json
index ed6f77967..88bf2e236 100644
--- a/apps/web/src/__generated__/questions/user-interface/progress-bars-iv/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/progress-bars-iv/react/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var n in e)s(r,n,{get:e[n],enumerable:!0})},u=(r,e,n,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!w.call(r,i)&&i!==n&&s(r,i,{get:()=>e[i],enumerable:!(o=f(e,i))||o.enumerable});return r};var p=(r,e,n)=>(n=r!=null?d(y(r)):{},u(e||!r||!r.__esModule?s(n,\"default\",{value:r,enumerable:!0}):n,r)),I=r=>u(s({},\"__esModule\",{value:!0}),r);var a=x((B,c)=>{c.exports=_jsx_runtime});var M={};j(M,{default:()=>D});var l=p(a());var t=p(a());function h(r){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\"},r.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-iii\",children:\"Progress Bars III\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-iii\",children:\"Progress Bars III\"}),\", we built progress bars which fill up in parallel, where multiple of them are filling up concurrently, up to a limit of 3. In this question, we'll allow pausing and resuming of the animation.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Initially there will be one empty progress bar.\"}),`\n`,(0,t.jsx)(e.li,{children:\"The progress bars fill up gradually in parallel, up to a limit of 3 concurrent bars filling up. i.e. the fourth progress bar will only start filling up after the third progress bar is completely filled up.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Each bar takes approximately 2000ms to completely fill up.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Implement the following buttons with the functionality:\",`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:'Start/Pause: Starts/pauses the filling up of the progress bars. The button label turns into \"Pause\" when the animation is playing.'}),`\n`,(0,t.jsx)(e.li,{children:\"Add: Appends a new progress bar to the bottom of the list.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Reset: Resets to the initial state where there is only one empty bar and stops any running animations.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.img,{src:\"/img/questions/progress-bars-iv/progress-bars-example.png\",alt:\"Progress Bars Example\"})})]})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,t.jsx)(e,Object.assign({},r,{children:(0,t.jsx)(h,r)})):h(r)}var m=_;function g(r){return(0,l.jsx)(m,{})}function q(r={}){let{wrapper:e}=r.components||{};return e?(0,l.jsx)(e,Object.assign({},r,{children:(0,l.jsx)(g,r)})):g(r)}var D=q;return I(M);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),j=(r,e)=>{for(var n in e)s(r,n,{get:e[n],enumerable:!0})},u=(r,e,n,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of b(e))!w.call(r,i)&&i!==n&&s(r,i,{get:()=>e[i],enumerable:!(o=f(e,i))||o.enumerable});return r};var c=(r,e,n)=>(n=r!=null?d(y(r)):{},u(e||!r||!r.__esModule?s(n,\"default\",{value:r,enumerable:!0}):n,r)),I=r=>u(s({},\"__esModule\",{value:!0}),r);var l=x((B,p)=>{p.exports=_jsx_runtime});var M={};j(M,{default:()=>D});var a=c(l());var t=c(l());function h(r){let e=Object.assign({p:\"p\",strong:\"strong\",a:\"a\",h2:\"h2\",ul:\"ul\",li:\"li\",img:\"img\"},r.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"Note:\"}),\" This is an advanced version of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-iii\",children:\"Progress Bars III\"}),\", you should complete that question first before attempting this question.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"In \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/progress-bars-iii\",children:\"Progress Bars III\"}),\", we built progress bars which fill up in parallel, where multiple of them are filling up concurrently, up to a limit of 3. In this question, we'll allow pausing and resuming of the animation.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Requirements\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Initially there will be one empty progress bar.\"}),`\n`,(0,t.jsx)(e.li,{children:\"The progress bars fill up gradually in parallel, up to a limit of 3 concurrent bars filling up. i.e. the fourth progress bar will only start filling up after the third progress bar is completely filled up.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Each bar takes approximately 2000ms to completely fill up.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Implement the following buttons with the functionality:\",`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:'Start/Pause: Starts/pauses the filling up of the progress bars. The button label turns into \"Pause\" when the animation is playing.'}),`\n`,(0,t.jsx)(e.li,{children:\"Add: Appends a new progress bar to the bottom of the list.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Reset: Resets to the initial state where there is only one empty bar and stops any running animations.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,t.jsx)(e.h2,{children:\"Example\"}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.img,{src:\"/img/questions/progress-bars-iv/progress-bars-example.png\",alt:\"Progress Bars Example\"})})]})}function _(r={}){let{wrapper:e}=r.components||{};return e?(0,t.jsx)(e,Object.assign({},r,{children:(0,t.jsx)(h,r)})):h(r)}var m=_;function g(r){return(0,a.jsx)(m,{})}function q(r={}){let{wrapper:e}=r.components||{};return e?(0,a.jsx)(e,Object.assign({},r,{children:(0,a.jsx)(g,r)})):g(r)}var D=q;return I(M);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/progress-bars/metadata.json b/apps/web/src/__generated__/questions/user-interface/progress-bars/metadata.json
index fd2c6eb2c..b511dd2c1 100644
--- a/apps/web/src/__generated__/questions/user-interface/progress-bars/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/progress-bars/metadata.json
@@ -33,5 +33,7 @@
   "slug": "progress-bars",
   "subtitle": null,
   "title": "Progress Bars",
-  "topics": []
+  "topics": [
+    "async"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/stopwatch/angular/skeleton.json b/apps/web/src/__generated__/questions/user-interface/stopwatch/angular/skeleton.json
index dac1ac408..801c431dd 100644
--- a/apps/web/src/__generated__/questions/user-interface/stopwatch/angular/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/stopwatch/angular/skeleton.json
@@ -47,5 +47,5 @@
     "activeFile": "/src/app/app.component.ts",
     "environment": "angular-cli"
   },
-  "writeup": "var Component=(()=>{var w=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var b=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),y=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let s of f(t))!j.call(e,s)&&s!==o&&a(e,s,{get:()=>t[s],enumerable:!(c=g(t,s))||c.enumerable});return e};var l=(e,t,o)=>(o=e!=null?w(x(e)):{},h(t||!e||!e.__esModule?a(o,\"default\",{value:e,enumerable:!0}):o,e)),_=e=>h(a({},\"__esModule\",{value:!0}),e);var r=b((R,u)=>{u.exports=_jsx_runtime});var C={};y(C,{default:()=>M});var i=l(r());var n=l(r());function d(e){let t=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:'Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: \"Start/Stop\" and \"Reset\".'}),`\n`,(0,n.jsx)(t.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Start/Stop Button: Starts/stops the timer depending on whether the timer is running.\"}),`\n`,(0,n.jsx)(t.li,{children:\"Reset: Resets the timer to 0 and stops the timer.\"}),`\n`,(0,n.jsxs)(t.li,{children:[\"The timer shows the number of seconds elapsed, down to the millisecond.\",`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Clicking on the timer should start/stop the timer. The Start/Stop button's label should update accordingly as well.\"}),`\n`,(0,n.jsx)(t.li,{children:\"It'd be a nice optional addition to format the time to display in hh:mm:ss:ms format.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(t.p,{children:[\"You are free to exercise your creativity to style the appearance of the stopwatch. You can try out \",(0,n.jsx)(t.a,{href:\"https://www.google.com/search?q=stopwatch\",children:\"Google's stopwatch widget\"}),\" for inspiration and an example.\"]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var m=S;function p(e){return(0,i.jsx)(m,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,Object.assign({},e,{children:(0,i.jsx)(p,e)})):p(e)}var M=D;return _(C);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var w=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),b=(e,t)=>{for(var s in t)a(e,s,{get:t[s],enumerable:!0})},h=(e,t,s,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of f(t))!j.call(e,o)&&o!==s&&a(e,o,{get:()=>t[o],enumerable:!(c=g(t,o))||c.enumerable});return e};var l=(e,t,s)=>(s=e!=null?w(x(e)):{},h(t||!e||!e.__esModule?a(s,\"default\",{value:e,enumerable:!0}):s,e)),_=e=>h(a({},\"__esModule\",{value:!0}),e);var r=y((R,u)=>{u.exports=_jsx_runtime});var C={};b(C,{default:()=>M});var i=l(r());var n=l(r());function d(e){let t=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:'Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: \"Start/Stop\" and \"Reset\".'}),`\n`,(0,n.jsx)(t.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Start/Stop Button: Starts/stops the timer depending on whether the timer is running.\"}),`\n`,(0,n.jsx)(t.li,{children:\"Reset: Resets the timer to 0 and stops the timer.\"}),`\n`,(0,n.jsxs)(t.li,{children:[\"The timer shows the number of seconds elapsed, down to the millisecond.\",`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Clicking on the timer should start/stop the timer. The Start/Stop button's label should update accordingly as well.\"}),`\n`,(0,n.jsx)(t.li,{children:\"It'd be a nice optional addition to format the time to display in hh:mm:ss:ms format.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(t.p,{children:[\"You are free to exercise your creativity to style the appearance of the stopwatch. You can try out \",(0,n.jsx)(t.a,{href:\"https://www.google.com/search?q=stopwatch\",children:\"Google's stopwatch widget\"}),\" for inspiration and an example.\"]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var m=S;function p(e){return(0,i.jsx)(m,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,Object.assign({},e,{children:(0,i.jsx)(p,e)})):p(e)}var M=D;return _(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/stopwatch/metadata.json b/apps/web/src/__generated__/questions/user-interface/stopwatch/metadata.json
index 131a785ad..82e7a5d69 100644
--- a/apps/web/src/__generated__/questions/user-interface/stopwatch/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/stopwatch/metadata.json
@@ -50,5 +50,7 @@
   "slug": "stopwatch",
   "subtitle": null,
   "title": "Stopwatch",
-  "topics": []
+  "topics": [
+    "async"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/stopwatch/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/stopwatch/react/skeleton.json
index bf8b6c9d3..6aecef573 100644
--- a/apps/web/src/__generated__/questions/user-interface/stopwatch/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/stopwatch/react/skeleton.json
@@ -29,5 +29,5 @@
     "activeFile": "/src/Stopwatch.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var w=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var b=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),y=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let s of f(t))!j.call(e,s)&&s!==o&&a(e,s,{get:()=>t[s],enumerable:!(c=g(t,s))||c.enumerable});return e};var l=(e,t,o)=>(o=e!=null?w(x(e)):{},h(t||!e||!e.__esModule?a(o,\"default\",{value:e,enumerable:!0}):o,e)),_=e=>h(a({},\"__esModule\",{value:!0}),e);var r=b((R,u)=>{u.exports=_jsx_runtime});var C={};y(C,{default:()=>M});var i=l(r());var n=l(r());function d(e){let t=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:'Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: \"Start/Stop\" and \"Reset\".'}),`\n`,(0,n.jsx)(t.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Start/Stop Button: Starts/stops the timer depending on whether the timer is running.\"}),`\n`,(0,n.jsx)(t.li,{children:\"Reset: Resets the timer to 0 and stops the timer.\"}),`\n`,(0,n.jsxs)(t.li,{children:[\"The timer shows the number of seconds elapsed, down to the millisecond.\",`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Clicking on the timer should start/stop the timer. The Start/Stop button's label should update accordingly as well.\"}),`\n`,(0,n.jsx)(t.li,{children:\"It'd be a nice optional addition to format the time to display in hh:mm:ss:ms format.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(t.p,{children:[\"You are free to exercise your creativity to style the appearance of the stopwatch. You can try out \",(0,n.jsx)(t.a,{href:\"https://www.google.com/search?q=stopwatch\",children:\"Google's stopwatch widget\"}),\" for inspiration and an example.\"]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var m=S;function p(e){return(0,i.jsx)(m,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,Object.assign({},e,{children:(0,i.jsx)(p,e)})):p(e)}var M=D;return _(C);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var w=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),b=(e,t)=>{for(var s in t)a(e,s,{get:t[s],enumerable:!0})},h=(e,t,s,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of f(t))!j.call(e,o)&&o!==s&&a(e,o,{get:()=>t[o],enumerable:!(c=g(t,o))||c.enumerable});return e};var l=(e,t,s)=>(s=e!=null?w(x(e)):{},h(t||!e||!e.__esModule?a(s,\"default\",{value:e,enumerable:!0}):s,e)),_=e=>h(a({},\"__esModule\",{value:!0}),e);var r=y((R,u)=>{u.exports=_jsx_runtime});var C={};b(C,{default:()=>M});var i=l(r());var n=l(r());function d(e){let t=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:'Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: \"Start/Stop\" and \"Reset\".'}),`\n`,(0,n.jsx)(t.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Start/Stop Button: Starts/stops the timer depending on whether the timer is running.\"}),`\n`,(0,n.jsx)(t.li,{children:\"Reset: Resets the timer to 0 and stops the timer.\"}),`\n`,(0,n.jsxs)(t.li,{children:[\"The timer shows the number of seconds elapsed, down to the millisecond.\",`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Clicking on the timer should start/stop the timer. The Start/Stop button's label should update accordingly as well.\"}),`\n`,(0,n.jsx)(t.li,{children:\"It'd be a nice optional addition to format the time to display in hh:mm:ss:ms format.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(t.p,{children:[\"You are free to exercise your creativity to style the appearance of the stopwatch. You can try out \",(0,n.jsx)(t.a,{href:\"https://www.google.com/search?q=stopwatch\",children:\"Google's stopwatch widget\"}),\" for inspiration and an example.\"]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var m=S;function p(e){return(0,i.jsx)(m,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,Object.assign({},e,{children:(0,i.jsx)(p,e)})):p(e)}var M=D;return _(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/stopwatch/svelte/skeleton.json b/apps/web/src/__generated__/questions/user-interface/stopwatch/svelte/skeleton.json
index 8c8dc07d7..4c07c4689 100644
--- a/apps/web/src/__generated__/questions/user-interface/stopwatch/svelte/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/stopwatch/svelte/skeleton.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var w=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var b=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),y=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let s of f(t))!j.call(e,s)&&s!==o&&a(e,s,{get:()=>t[s],enumerable:!(c=g(t,s))||c.enumerable});return e};var l=(e,t,o)=>(o=e!=null?w(x(e)):{},h(t||!e||!e.__esModule?a(o,\"default\",{value:e,enumerable:!0}):o,e)),_=e=>h(a({},\"__esModule\",{value:!0}),e);var r=b((R,u)=>{u.exports=_jsx_runtime});var C={};y(C,{default:()=>M});var i=l(r());var n=l(r());function d(e){let t=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:'Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: \"Start/Stop\" and \"Reset\".'}),`\n`,(0,n.jsx)(t.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Start/Stop Button: Starts/stops the timer depending on whether the timer is running.\"}),`\n`,(0,n.jsx)(t.li,{children:\"Reset: Resets the timer to 0 and stops the timer.\"}),`\n`,(0,n.jsxs)(t.li,{children:[\"The timer shows the number of seconds elapsed, down to the millisecond.\",`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Clicking on the timer should start/stop the timer. The Start/Stop button's label should update accordingly as well.\"}),`\n`,(0,n.jsx)(t.li,{children:\"It'd be a nice optional addition to format the time to display in hh:mm:ss:ms format.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(t.p,{children:[\"You are free to exercise your creativity to style the appearance of the stopwatch. You can try out \",(0,n.jsx)(t.a,{href:\"https://www.google.com/search?q=stopwatch\",children:\"Google's stopwatch widget\"}),\" for inspiration and an example.\"]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var m=S;function p(e){return(0,i.jsx)(m,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,Object.assign({},e,{children:(0,i.jsx)(p,e)})):p(e)}var M=D;return _(C);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var w=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),b=(e,t)=>{for(var s in t)a(e,s,{get:t[s],enumerable:!0})},h=(e,t,s,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of f(t))!j.call(e,o)&&o!==s&&a(e,o,{get:()=>t[o],enumerable:!(c=g(t,o))||c.enumerable});return e};var l=(e,t,s)=>(s=e!=null?w(x(e)):{},h(t||!e||!e.__esModule?a(s,\"default\",{value:e,enumerable:!0}):s,e)),_=e=>h(a({},\"__esModule\",{value:!0}),e);var r=y((R,u)=>{u.exports=_jsx_runtime});var C={};b(C,{default:()=>M});var i=l(r());var n=l(r());function d(e){let t=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:'Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: \"Start/Stop\" and \"Reset\".'}),`\n`,(0,n.jsx)(t.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Start/Stop Button: Starts/stops the timer depending on whether the timer is running.\"}),`\n`,(0,n.jsx)(t.li,{children:\"Reset: Resets the timer to 0 and stops the timer.\"}),`\n`,(0,n.jsxs)(t.li,{children:[\"The timer shows the number of seconds elapsed, down to the millisecond.\",`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Clicking on the timer should start/stop the timer. The Start/Stop button's label should update accordingly as well.\"}),`\n`,(0,n.jsx)(t.li,{children:\"It'd be a nice optional addition to format the time to display in hh:mm:ss:ms format.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(t.p,{children:[\"You are free to exercise your creativity to style the appearance of the stopwatch. You can try out \",(0,n.jsx)(t.a,{href:\"https://www.google.com/search?q=stopwatch\",children:\"Google's stopwatch widget\"}),\" for inspiration and an example.\"]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var m=S;function p(e){return(0,i.jsx)(m,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,Object.assign({},e,{children:(0,i.jsx)(p,e)})):p(e)}var M=D;return _(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/stopwatch/vanilla/skeleton.json b/apps/web/src/__generated__/questions/user-interface/stopwatch/vanilla/skeleton.json
index d26f7b77c..f69cdc069 100644
--- a/apps/web/src/__generated__/questions/user-interface/stopwatch/vanilla/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/stopwatch/vanilla/skeleton.json
@@ -23,5 +23,5 @@
     "activeFile": "/src/index.html",
     "environment": "parcel"
   },
-  "writeup": "var Component=(()=>{var w=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var b=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),y=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let s of f(t))!j.call(e,s)&&s!==o&&a(e,s,{get:()=>t[s],enumerable:!(c=g(t,s))||c.enumerable});return e};var l=(e,t,o)=>(o=e!=null?w(x(e)):{},h(t||!e||!e.__esModule?a(o,\"default\",{value:e,enumerable:!0}):o,e)),_=e=>h(a({},\"__esModule\",{value:!0}),e);var r=b((R,u)=>{u.exports=_jsx_runtime});var C={};y(C,{default:()=>M});var i=l(r());var n=l(r());function d(e){let t=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:'Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: \"Start/Stop\" and \"Reset\".'}),`\n`,(0,n.jsx)(t.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Start/Stop Button: Starts/stops the timer depending on whether the timer is running.\"}),`\n`,(0,n.jsx)(t.li,{children:\"Reset: Resets the timer to 0 and stops the timer.\"}),`\n`,(0,n.jsxs)(t.li,{children:[\"The timer shows the number of seconds elapsed, down to the millisecond.\",`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Clicking on the timer should start/stop the timer. The Start/Stop button's label should update accordingly as well.\"}),`\n`,(0,n.jsx)(t.li,{children:\"It'd be a nice optional addition to format the time to display in hh:mm:ss:ms format.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(t.p,{children:[\"You are free to exercise your creativity to style the appearance of the stopwatch. You can try out \",(0,n.jsx)(t.a,{href:\"https://www.google.com/search?q=stopwatch\",children:\"Google's stopwatch widget\"}),\" for inspiration and an example.\"]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var m=S;function p(e){return(0,i.jsx)(m,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,Object.assign({},e,{children:(0,i.jsx)(p,e)})):p(e)}var M=D;return _(C);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var w=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),b=(e,t)=>{for(var s in t)a(e,s,{get:t[s],enumerable:!0})},h=(e,t,s,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of f(t))!j.call(e,o)&&o!==s&&a(e,o,{get:()=>t[o],enumerable:!(c=g(t,o))||c.enumerable});return e};var l=(e,t,s)=>(s=e!=null?w(x(e)):{},h(t||!e||!e.__esModule?a(s,\"default\",{value:e,enumerable:!0}):s,e)),_=e=>h(a({},\"__esModule\",{value:!0}),e);var r=y((R,u)=>{u.exports=_jsx_runtime});var C={};b(C,{default:()=>M});var i=l(r());var n=l(r());function d(e){let t=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:'Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: \"Start/Stop\" and \"Reset\".'}),`\n`,(0,n.jsx)(t.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Start/Stop Button: Starts/stops the timer depending on whether the timer is running.\"}),`\n`,(0,n.jsx)(t.li,{children:\"Reset: Resets the timer to 0 and stops the timer.\"}),`\n`,(0,n.jsxs)(t.li,{children:[\"The timer shows the number of seconds elapsed, down to the millisecond.\",`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Clicking on the timer should start/stop the timer. The Start/Stop button's label should update accordingly as well.\"}),`\n`,(0,n.jsx)(t.li,{children:\"It'd be a nice optional addition to format the time to display in hh:mm:ss:ms format.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(t.p,{children:[\"You are free to exercise your creativity to style the appearance of the stopwatch. You can try out \",(0,n.jsx)(t.a,{href:\"https://www.google.com/search?q=stopwatch\",children:\"Google's stopwatch widget\"}),\" for inspiration and an example.\"]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var m=S;function p(e){return(0,i.jsx)(m,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,Object.assign({},e,{children:(0,i.jsx)(p,e)})):p(e)}var M=D;return _(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/stopwatch/vue/skeleton.json b/apps/web/src/__generated__/questions/user-interface/stopwatch/vue/skeleton.json
index 40539918a..4625e0ad4 100644
--- a/apps/web/src/__generated__/questions/user-interface/stopwatch/vue/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/stopwatch/vue/skeleton.json
@@ -24,5 +24,5 @@
     "activeFile": "/src/App.vue",
     "environment": "vue-cli"
   },
-  "writeup": "var Component=(()=>{var w=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var b=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),y=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let s of f(t))!j.call(e,s)&&s!==o&&a(e,s,{get:()=>t[s],enumerable:!(c=g(t,s))||c.enumerable});return e};var l=(e,t,o)=>(o=e!=null?w(x(e)):{},h(t||!e||!e.__esModule?a(o,\"default\",{value:e,enumerable:!0}):o,e)),_=e=>h(a({},\"__esModule\",{value:!0}),e);var r=b((R,u)=>{u.exports=_jsx_runtime});var C={};y(C,{default:()=>M});var i=l(r());var n=l(r());function d(e){let t=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:'Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: \"Start/Stop\" and \"Reset\".'}),`\n`,(0,n.jsx)(t.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Start/Stop Button: Starts/stops the timer depending on whether the timer is running.\"}),`\n`,(0,n.jsx)(t.li,{children:\"Reset: Resets the timer to 0 and stops the timer.\"}),`\n`,(0,n.jsxs)(t.li,{children:[\"The timer shows the number of seconds elapsed, down to the millisecond.\",`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Clicking on the timer should start/stop the timer. The Start/Stop button's label should update accordingly as well.\"}),`\n`,(0,n.jsx)(t.li,{children:\"It'd be a nice optional addition to format the time to display in hh:mm:ss:ms format.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(t.p,{children:[\"You are free to exercise your creativity to style the appearance of the stopwatch. You can try out \",(0,n.jsx)(t.a,{href:\"https://www.google.com/search?q=stopwatch\",children:\"Google's stopwatch widget\"}),\" for inspiration and an example.\"]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var m=S;function p(e){return(0,i.jsx)(m,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,Object.assign({},e,{children:(0,i.jsx)(p,e)})):p(e)}var M=D;return _(C);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var w=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),b=(e,t)=>{for(var s in t)a(e,s,{get:t[s],enumerable:!0})},h=(e,t,s,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of f(t))!j.call(e,o)&&o!==s&&a(e,o,{get:()=>t[o],enumerable:!(c=g(t,o))||c.enumerable});return e};var l=(e,t,s)=>(s=e!=null?w(x(e)):{},h(t||!e||!e.__esModule?a(s,\"default\",{value:e,enumerable:!0}):s,e)),_=e=>h(a({},\"__esModule\",{value:!0}),e);var r=y((R,u)=>{u.exports=_jsx_runtime});var C={};b(C,{default:()=>M});var i=l(r());var n=l(r());function d(e){let t=Object.assign({p:\"p\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:'Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: \"Start/Stop\" and \"Reset\".'}),`\n`,(0,n.jsx)(t.h2,{children:\"Requirements\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Start/Stop Button: Starts/stops the timer depending on whether the timer is running.\"}),`\n`,(0,n.jsx)(t.li,{children:\"Reset: Resets the timer to 0 and stops the timer.\"}),`\n`,(0,n.jsxs)(t.li,{children:[\"The timer shows the number of seconds elapsed, down to the millisecond.\",`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Clicking on the timer should start/stop the timer. The Start/Stop button's label should update accordingly as well.\"}),`\n`,(0,n.jsx)(t.li,{children:\"It'd be a nice optional addition to format the time to display in hh:mm:ss:ms format.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(t.p,{children:[\"You are free to exercise your creativity to style the appearance of the stopwatch. You can try out \",(0,n.jsx)(t.a,{href:\"https://www.google.com/search?q=stopwatch\",children:\"Google's stopwatch widget\"}),\" for inspiration and an example.\"]})]})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var m=S;function p(e){return(0,i.jsx)(m,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,Object.assign({},e,{children:(0,i.jsx)(p,e)})):p(e)}var M=D;return _(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/tabs-ii/metadata.json b/apps/web/src/__generated__/questions/user-interface/tabs-ii/metadata.json
index 0db7de0f1..7fbb044d1 100644
--- a/apps/web/src/__generated__/questions/user-interface/tabs-ii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/tabs-ii/metadata.json
@@ -46,5 +46,7 @@
   "slug": "tabs-ii",
   "subtitle": null,
   "title": "Tabs II",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/tabs-iii/metadata.json b/apps/web/src/__generated__/questions/user-interface/tabs-iii/metadata.json
index 99a93544f..ea7364449 100644
--- a/apps/web/src/__generated__/questions/user-interface/tabs-iii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/tabs-iii/metadata.json
@@ -39,5 +39,7 @@
   "slug": "tabs-iii",
   "subtitle": null,
   "title": "Tabs III",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/tabs/metadata.json b/apps/web/src/__generated__/questions/user-interface/tabs/metadata.json
index b200209ae..8f3334ac0 100644
--- a/apps/web/src/__generated__/questions/user-interface/tabs/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/tabs/metadata.json
@@ -46,5 +46,7 @@
   "slug": "tabs",
   "subtitle": null,
   "title": "Tabs",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/tic-tac-toe-ii/metadata.json b/apps/web/src/__generated__/questions/user-interface/tic-tac-toe-ii/metadata.json
index 920acdb14..20f9d4a4b 100644
--- a/apps/web/src/__generated__/questions/user-interface/tic-tac-toe-ii/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/tic-tac-toe-ii/metadata.json
@@ -46,5 +46,7 @@
   "slug": "tic-tac-toe-ii",
   "subtitle": null,
   "title": "Tic-tac-toe II",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/tic-tac-toe/metadata.json b/apps/web/src/__generated__/questions/user-interface/tic-tac-toe/metadata.json
index 0588c1b1c..69be24215 100644
--- a/apps/web/src/__generated__/questions/user-interface/tic-tac-toe/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/tic-tac-toe/metadata.json
@@ -48,5 +48,7 @@
   "slug": "tic-tac-toe",
   "subtitle": null,
   "title": "Tic-tac-toe",
-  "topics": []
+  "topics": [
+    "a11y"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/traffic-light/angular/skeleton.json b/apps/web/src/__generated__/questions/user-interface/traffic-light/angular/skeleton.json
index 56a00ca9b..2ae475dbb 100644
--- a/apps/web/src/__generated__/questions/user-interface/traffic-light/angular/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/traffic-light/angular/skeleton.json
@@ -59,5 +59,5 @@
     "activeFile": "/src/app/traffic-light.component.ts",
     "environment": "angular-cli"
   },
-  "writeup": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)l(e,i,{get:t[i],enumerable:!0})},c=(e,t,i,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!j.call(e,r)&&r!==i&&l(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var h=(e,t,i)=>(i=e!=null?g(w(e)):{},c(t||!e||!e.__esModule?l(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>c(l({},\"__esModule\",{value:!0}),e);var a=y((L,d)=>{d.exports=_jsx_runtime});var C={};_(C,{default:()=>M});var o=h(a());var n=h(a());function f(e){let t=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Red light: 4000ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Yellow light: 500ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Green light: 3000ms\"}),`\n`]}),`\n`,(0,n.jsx)(t.p,{children:\"You are free to exercise your creativity to style the appearance of the traffic light.\"})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(f,e)})):f(e)}var u=v;function m(e){return(0,o.jsx)(u,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var M=D;return b(C);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var j=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)l(e,i,{get:t[i],enumerable:!0})},c=(e,t,i,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!y.call(e,r)&&r!==i&&l(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var h=(e,t,i)=>(i=e!=null?g(w(e)):{},c(t||!e||!e.__esModule?l(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>c(l({},\"__esModule\",{value:!0}),e);var a=j((L,d)=>{d.exports=_jsx_runtime});var C={};_(C,{default:()=>M});var o=h(a());var n=h(a());function f(e){let t=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Red light: 4000ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Yellow light: 500ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Green light: 3000ms\"}),`\n`]}),`\n`,(0,n.jsx)(t.p,{children:\"You are free to exercise your creativity to style the appearance of the traffic light.\"})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(f,e)})):f(e)}var u=v;function m(e){return(0,o.jsx)(u,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var M=D;return b(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/traffic-light/metadata.json b/apps/web/src/__generated__/questions/user-interface/traffic-light/metadata.json
index e6fb77e95..2b20f53ca 100644
--- a/apps/web/src/__generated__/questions/user-interface/traffic-light/metadata.json
+++ b/apps/web/src/__generated__/questions/user-interface/traffic-light/metadata.json
@@ -49,5 +49,7 @@
   "slug": "traffic-light",
   "subtitle": null,
   "title": "Traffic Light",
-  "topics": []
+  "topics": [
+    "async"
+  ]
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/traffic-light/react/skeleton.json b/apps/web/src/__generated__/questions/user-interface/traffic-light/react/skeleton.json
index a7f3c6ef3..d6f3fec43 100644
--- a/apps/web/src/__generated__/questions/user-interface/traffic-light/react/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/traffic-light/react/skeleton.json
@@ -29,5 +29,5 @@
     "activeFile": "/src/TrafficLight.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)l(e,i,{get:t[i],enumerable:!0})},c=(e,t,i,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!j.call(e,r)&&r!==i&&l(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var h=(e,t,i)=>(i=e!=null?g(w(e)):{},c(t||!e||!e.__esModule?l(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>c(l({},\"__esModule\",{value:!0}),e);var a=y((L,d)=>{d.exports=_jsx_runtime});var C={};_(C,{default:()=>M});var o=h(a());var n=h(a());function f(e){let t=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Red light: 4000ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Yellow light: 500ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Green light: 3000ms\"}),`\n`]}),`\n`,(0,n.jsx)(t.p,{children:\"You are free to exercise your creativity to style the appearance of the traffic light.\"})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(f,e)})):f(e)}var u=v;function m(e){return(0,o.jsx)(u,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var M=D;return b(C);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var j=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)l(e,i,{get:t[i],enumerable:!0})},c=(e,t,i,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!y.call(e,r)&&r!==i&&l(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var h=(e,t,i)=>(i=e!=null?g(w(e)):{},c(t||!e||!e.__esModule?l(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>c(l({},\"__esModule\",{value:!0}),e);var a=j((L,d)=>{d.exports=_jsx_runtime});var C={};_(C,{default:()=>M});var o=h(a());var n=h(a());function f(e){let t=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Red light: 4000ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Yellow light: 500ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Green light: 3000ms\"}),`\n`]}),`\n`,(0,n.jsx)(t.p,{children:\"You are free to exercise your creativity to style the appearance of the traffic light.\"})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(f,e)})):f(e)}var u=v;function m(e){return(0,o.jsx)(u,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var M=D;return b(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/traffic-light/svelte/skeleton.json b/apps/web/src/__generated__/questions/user-interface/traffic-light/svelte/skeleton.json
index 89e63202b..bd8d7fe1e 100644
--- a/apps/web/src/__generated__/questions/user-interface/traffic-light/svelte/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/traffic-light/svelte/skeleton.json
@@ -29,5 +29,5 @@
     "activeFile": "/src/TrafficLight.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)l(e,i,{get:t[i],enumerable:!0})},c=(e,t,i,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!j.call(e,r)&&r!==i&&l(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var h=(e,t,i)=>(i=e!=null?g(w(e)):{},c(t||!e||!e.__esModule?l(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>c(l({},\"__esModule\",{value:!0}),e);var a=y((L,d)=>{d.exports=_jsx_runtime});var C={};_(C,{default:()=>M});var o=h(a());var n=h(a());function f(e){let t=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Red light: 4000ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Yellow light: 500ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Green light: 3000ms\"}),`\n`]}),`\n`,(0,n.jsx)(t.p,{children:\"You are free to exercise your creativity to style the appearance of the traffic light.\"})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(f,e)})):f(e)}var u=v;function m(e){return(0,o.jsx)(u,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var M=D;return b(C);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var j=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)l(e,i,{get:t[i],enumerable:!0})},c=(e,t,i,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!y.call(e,r)&&r!==i&&l(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var h=(e,t,i)=>(i=e!=null?g(w(e)):{},c(t||!e||!e.__esModule?l(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>c(l({},\"__esModule\",{value:!0}),e);var a=j((L,d)=>{d.exports=_jsx_runtime});var C={};_(C,{default:()=>M});var o=h(a());var n=h(a());function f(e){let t=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Red light: 4000ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Yellow light: 500ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Green light: 3000ms\"}),`\n`]}),`\n`,(0,n.jsx)(t.p,{children:\"You are free to exercise your creativity to style the appearance of the traffic light.\"})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(f,e)})):f(e)}var u=v;function m(e){return(0,o.jsx)(u,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var M=D;return b(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/traffic-light/vanilla/skeleton.json b/apps/web/src/__generated__/questions/user-interface/traffic-light/vanilla/skeleton.json
index 522152813..7fb897337 100644
--- a/apps/web/src/__generated__/questions/user-interface/traffic-light/vanilla/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/traffic-light/vanilla/skeleton.json
@@ -23,5 +23,5 @@
     "activeFile": "/src/index.html",
     "environment": "parcel"
   },
-  "writeup": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)l(e,i,{get:t[i],enumerable:!0})},c=(e,t,i,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!j.call(e,r)&&r!==i&&l(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var h=(e,t,i)=>(i=e!=null?g(w(e)):{},c(t||!e||!e.__esModule?l(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>c(l({},\"__esModule\",{value:!0}),e);var a=y((L,d)=>{d.exports=_jsx_runtime});var C={};_(C,{default:()=>M});var o=h(a());var n=h(a());function f(e){let t=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Red light: 4000ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Yellow light: 500ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Green light: 3000ms\"}),`\n`]}),`\n`,(0,n.jsx)(t.p,{children:\"You are free to exercise your creativity to style the appearance of the traffic light.\"})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(f,e)})):f(e)}var u=v;function m(e){return(0,o.jsx)(u,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var M=D;return b(C);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var j=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)l(e,i,{get:t[i],enumerable:!0})},c=(e,t,i,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!y.call(e,r)&&r!==i&&l(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var h=(e,t,i)=>(i=e!=null?g(w(e)):{},c(t||!e||!e.__esModule?l(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>c(l({},\"__esModule\",{value:!0}),e);var a=j((L,d)=>{d.exports=_jsx_runtime});var C={};_(C,{default:()=>M});var o=h(a());var n=h(a());function f(e){let t=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Red light: 4000ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Yellow light: 500ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Green light: 3000ms\"}),`\n`]}),`\n`,(0,n.jsx)(t.p,{children:\"You are free to exercise your creativity to style the appearance of the traffic light.\"})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(f,e)})):f(e)}var u=v;function m(e){return(0,o.jsx)(u,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var M=D;return b(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/traffic-light/vue/skeleton.json b/apps/web/src/__generated__/questions/user-interface/traffic-light/vue/skeleton.json
index 9a711c05d..702ade8d7 100644
--- a/apps/web/src/__generated__/questions/user-interface/traffic-light/vue/skeleton.json
+++ b/apps/web/src/__generated__/questions/user-interface/traffic-light/vue/skeleton.json
@@ -24,5 +24,5 @@
     "activeFile": "/src/App.vue",
     "environment": "vue-cli"
   },
-  "writeup": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var y=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)l(e,i,{get:t[i],enumerable:!0})},c=(e,t,i,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!j.call(e,r)&&r!==i&&l(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var h=(e,t,i)=>(i=e!=null?g(w(e)):{},c(t||!e||!e.__esModule?l(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>c(l({},\"__esModule\",{value:!0}),e);var a=y((L,d)=>{d.exports=_jsx_runtime});var C={};_(C,{default:()=>M});var o=h(a());var n=h(a());function f(e){let t=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Red light: 4000ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Yellow light: 500ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Green light: 3000ms\"}),`\n`]}),`\n`,(0,n.jsx)(t.p,{children:\"You are free to exercise your creativity to style the appearance of the traffic light.\"})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(f,e)})):f(e)}var u=v;function m(e){return(0,o.jsx)(u,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var M=D;return b(C);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var j=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var i in t)l(e,i,{get:t[i],enumerable:!0})},c=(e,t,i,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!y.call(e,r)&&r!==i&&l(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var h=(e,t,i)=>(i=e!=null?g(w(e)):{},c(t||!e||!e.__esModule?l(i,\"default\",{value:e,enumerable:!0}):i,e)),b=e=>c(l({},\"__esModule\",{value:!0}),e);var a=j((L,d)=>{d.exports=_jsx_runtime});var C={};_(C,{default:()=>M});var o=h(a());var n=h(a());function f(e){let t=Object.assign({p:\"p\",ul:\"ul\",li:\"li\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:\"Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:\"}),`\n`,(0,n.jsxs)(t.ul,{children:[`\n`,(0,n.jsx)(t.li,{children:\"Red light: 4000ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Yellow light: 500ms\"}),`\n`,(0,n.jsx)(t.li,{children:\"Green light: 3000ms\"}),`\n`]}),`\n`,(0,n.jsx)(t.p,{children:\"You are free to exercise your creativity to style the appearance of the traffic light.\"})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,Object.assign({},e,{children:(0,n.jsx)(f,e)})):f(e)}var u=v;function m(e){return(0,o.jsx)(u,{})}function D(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var M=D;return b(C);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/angular/solution.json b/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/angular/solution.json
index 65226b3ce..f8de2f709 100644
--- a/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/angular/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/angular/solution.json
@@ -59,5 +59,5 @@
     "activeFile": "/src/app/app.component.ts",
     "environment": "angular-cli"
   },
-  "writeup": "var Component=(()=>{var j=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var T=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var r in e)a(n,r,{get:e[r],enumerable:!0})},u=(n,e,r,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of _(e))!C.call(n,l)&&l!==r&&a(n,l,{get:()=>e[l],enumerable:!(h=y(e,l))||h.enumerable});return n};var d=(n,e,r)=>(r=n!=null?j(M(n)):{},u(e||!n||!n.__esModule?a(r,\"default\",{value:n,enumerable:!0}):r,n)),S=n=>u(a({},\"__esModule\",{value:!0}),n);var o=T((W,m)=>{m.exports=_jsx_runtime});var A={};D(A,{default:()=>L});var t=d(o());var i=d(o());function f(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Adding items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"New items can be added to their respective lists.\"}),`\n`,(0,i.jsx)(e.li,{children:\"New items are added to the bottom of the lists.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`,(0,i.jsxs)(e.li,{children:['\"Bulk selection\" checkbox',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Shows empty/indeterminate/checked when there are no/some/all items checked respectively.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking on it unselects / selects all the items depending on the selection state of the items.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Checkbox is disabled when there are no items in the list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Selection counts and total counts are reflected correctly.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(f,n)})):f(n)}var p=v;var c=d(o());function b(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.h2,{children:\"A11y\"}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[\"Use of \",(0,c.jsx)(e.code,{children:\"<form>\"}),\" submit for adding new items to the list.\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:'<input type=\"checkbox\">'}),\" are paired with \",(0,c.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also selects/deselect the item.\"]}),`\n`,(0,c.jsxs)(e.li,{children:[\"Since the \",(0,c.jsx)(e.code,{children:\"<button>\"}),\"s do not have a visible label, use \",(0,c.jsx)(e.code,{children:\"aria-label\"}),\"s to indicate their purpose. As a result, make the button contents hidden from screen readers via \",(0,c.jsx)(e.code,{children:'aria-hidden=\"true\"'}),\".\"]}),`\n`,(0,c.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function O(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(b,n)})):b(n)}var g=O;var s=d(o());function x(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"User Experience\"}),`\n`,(0,s.jsx)(e.p,{children:\"To ensure a good user experience, we can implement the following:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"Disallow non-empty items to be added to the list.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Input stays focused after an item has been added.\"}),`\n`]})]})}function X(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(x,n)})):x(n)}var w=X;function k(n){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",h3:\"h3\",code:\"code\",h4:\"h4\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The following explanation assumes you have a good understanding of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/transfer-list/angular/solution\",children:\"Transfer List's Angular solution\"}),\".\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The state structure remains the same and the choice of \",(0,t.jsx)(e.code,{children:\"Map\"}),\" is flexible enough to handle the new use case of adding items to the list.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,t.jsx)(e.p,{children:\"The main additions in this question are:\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Input form\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"We'll wrap the \",(0,t.jsx)(e.code,{children:\"<input>\"}),\" in a \",(0,t.jsx)(e.code,{children:\"<form>\"}),\" for built-in keyboard handling, a11y, and UX.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Bulk Selection Checkbox\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Did you know that an HTML checkbox actually has 3 states? They are checked, unchecked, and indeterminate. Indeterminate state is not commonly used and cannot be set via HTML attributes. Hence we need to obtain a reference to the checkbox instance and do \",(0,t.jsx)(e.code,{children:\"checkboxInputElement.indeterminate = true\"}),\". In modern frameworks, this can be done by using reference variables provides a way to access and interact with a DOM element directly.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We can write a new function called \",(0,t.jsx)(e.code,{children:\"determineListSelectionState\"}),\" that accepts the \",(0,t.jsx)(e.code,{children:\"items\"}),\" and determine the selection state of the list, whether no items are selected, some items are selected, or all items are selected. With this selection. With this state, we can render the appropriate appearance for the bulk selection checkbox. This state is also useful for determining what happens when the bulk selection checkbox is clicked/triggered. We can create a new function called \",(0,t.jsx)(e.code,{children:\"setAllItemsSelectionState\"}),\" to return a new set of list items which are set to a specific selection state.\"]}),`\n`,(0,t.jsx)(p,{}),`\n`,(0,t.jsx)(g,{}),`\n`,(0,t.jsx)(w,{})]})}function F(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(k,n)})):k(n)}var L=F;return S(A);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var j=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var T=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var r in e)a(n,r,{get:e[r],enumerable:!0})},u=(n,e,r,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of _(e))!C.call(n,l)&&l!==r&&a(n,l,{get:()=>e[l],enumerable:!(h=y(e,l))||h.enumerable});return n};var d=(n,e,r)=>(r=n!=null?j(M(n)):{},u(e||!n||!n.__esModule?a(r,\"default\",{value:n,enumerable:!0}):r,n)),S=n=>u(a({},\"__esModule\",{value:!0}),n);var o=T((W,m)=>{m.exports=_jsx_runtime});var A={};D(A,{default:()=>L});var t=d(o());var i=d(o());function f(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Adding items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"New items can be added to their respective lists.\"}),`\n`,(0,i.jsx)(e.li,{children:\"New items are added to the bottom of the lists.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`,(0,i.jsxs)(e.li,{children:['\"Bulk selection\" checkbox',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Shows empty/indeterminate/checked when there are no/some/all items checked respectively.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking on it unselects / selects all the items depending on the selection state of the items.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Checkbox is disabled when there are no items in the list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Selection counts and total counts are reflected correctly.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(f,n)})):f(n)}var b=v;var c=d(o());function p(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.h2,{children:\"Accessibility\"}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[\"Use of \",(0,c.jsx)(e.code,{children:\"<form>\"}),\" submit for adding new items to the list.\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:'<input type=\"checkbox\">'}),\" are paired with \",(0,c.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also selects/deselect the item.\"]}),`\n`,(0,c.jsxs)(e.li,{children:[\"Since the \",(0,c.jsx)(e.code,{children:\"<button>\"}),\"s do not have a visible label, use \",(0,c.jsx)(e.code,{children:\"aria-label\"}),\"s to indicate their purpose. As a result, make the button contents hidden from screen readers via \",(0,c.jsx)(e.code,{children:'aria-hidden=\"true\"'}),\".\"]}),`\n`,(0,c.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function O(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(p,n)})):p(n)}var g=O;var s=d(o());function x(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"User Experience\"}),`\n`,(0,s.jsx)(e.p,{children:\"To ensure a good user experience, we can implement the following:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"Disallow non-empty items to be added to the list.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Input stays focused after an item has been added.\"}),`\n`]})]})}function X(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(x,n)})):x(n)}var w=X;function k(n){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",h3:\"h3\",code:\"code\",h4:\"h4\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The following explanation assumes you have a good understanding of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/transfer-list/angular/solution\",children:\"Transfer List's Angular solution\"}),\".\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The state structure remains the same and the choice of \",(0,t.jsx)(e.code,{children:\"Map\"}),\" is flexible enough to handle the new use case of adding items to the list.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,t.jsx)(e.p,{children:\"The main additions in this question are:\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Input form\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"We'll wrap the \",(0,t.jsx)(e.code,{children:\"<input>\"}),\" in a \",(0,t.jsx)(e.code,{children:\"<form>\"}),\" for built-in keyboard handling, a11y, and UX.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Bulk Selection Checkbox\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Did you know that an HTML checkbox actually has 3 states? They are checked, unchecked, and indeterminate. Indeterminate state is not commonly used and cannot be set via HTML attributes. Hence we need to obtain a reference to the checkbox instance and do \",(0,t.jsx)(e.code,{children:\"checkboxInputElement.indeterminate = true\"}),\". In modern frameworks, this can be done by using reference variables provides a way to access and interact with a DOM element directly.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We can write a new function called \",(0,t.jsx)(e.code,{children:\"determineListSelectionState\"}),\" that accepts the \",(0,t.jsx)(e.code,{children:\"items\"}),\" and determine the selection state of the list, whether no items are selected, some items are selected, or all items are selected. With this selection. With this state, we can render the appropriate appearance for the bulk selection checkbox. This state is also useful for determining what happens when the bulk selection checkbox is clicked/triggered. We can create a new function called \",(0,t.jsx)(e.code,{children:\"setAllItemsSelectionState\"}),\" to return a new set of list items which are set to a specific selection state.\"]}),`\n`,(0,t.jsx)(b,{}),`\n`,(0,t.jsx)(g,{}),`\n`,(0,t.jsx)(w,{})]})}function F(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(k,n)})):k(n)}var L=F;return S(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/react/solution.json b/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/react/solution.json
index dd0807437..7bf3012dd 100644
--- a/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/react/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/react/solution.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var j=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var T=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),S=(n,e)=>{for(var l in e)a(n,l,{get:e[l],enumerable:!0})},u=(n,e,l,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of _(e))!C.call(n,o)&&o!==l&&a(n,o,{get:()=>e[o],enumerable:!(h=y(e,o))||h.enumerable});return n};var d=(n,e,l)=>(l=n!=null?j(M(n)):{},u(e||!n||!n.__esModule?a(l,\"default\",{value:n,enumerable:!0}):l,n)),D=n=>u(a({},\"__esModule\",{value:!0}),n);var r=T((W,m)=>{m.exports=_jsx_runtime});var A={};S(A,{default:()=>O});var t=d(r());var i=d(r());function f(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Adding items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"New items can be added to their respective lists.\"}),`\n`,(0,i.jsx)(e.li,{children:\"New items are added to the bottom of the lists.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`,(0,i.jsxs)(e.li,{children:['\"Bulk selection\" checkbox',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Shows empty/indeterminate/checked when there are no/some/all items checked respectively.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking on it unselects / selects all the items depending on the selection state of the items.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Checkbox is disabled when there are no items in the list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Selection counts and total counts are reflected correctly.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(f,n)})):f(n)}var p=v;var c=d(r());function b(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.h2,{children:\"A11y\"}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[\"Use of \",(0,c.jsx)(e.code,{children:\"<form>\"}),\" submit for adding new items to the list.\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:'<input type=\"checkbox\">'}),\" are paired with \",(0,c.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also selects/deselect the item.\"]}),`\n`,(0,c.jsxs)(e.li,{children:[\"Since the \",(0,c.jsx)(e.code,{children:\"<button>\"}),\"s do not have a visible label, use \",(0,c.jsx)(e.code,{children:\"aria-label\"}),\"s to indicate their purpose. As a result, make the button contents hidden from screen readers via \",(0,c.jsx)(e.code,{children:'aria-hidden=\"true\"'}),\".\"]}),`\n`,(0,c.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function X(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(b,n)})):b(n)}var x=X;var s=d(r());function g(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"User Experience\"}),`\n`,(0,s.jsx)(e.p,{children:\"To ensure a good user experience, we can implement the following:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"Disallow non-empty items to be added to the list.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Input stays focused after an item has been added.\"}),`\n`]})]})}function F(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(g,n)})):g(n)}var w=F;function k(n){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",h3:\"h3\",code:\"code\",h4:\"h4\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The following explanation assumes you have a good understanding of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/transfer-list/react/solution\",children:\"Transfer List's React solution\"}),\".\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The state structure remains the same and the choice of \",(0,t.jsx)(e.code,{children:\"Map\"}),\" is flexible enough to handle the new use case of adding items to the list.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,t.jsx)(e.p,{children:\"The main additions in this question are:\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Input form\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"We'll wrap the \",(0,t.jsx)(e.code,{children:\"<input>\"}),\" in a \",(0,t.jsx)(e.code,{children:\"<form>\"}),\" for built-in keyboard handling, a11y, and UX.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Bulk Selection Checkbox\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Did you know that an HTML checkbox actually has 3 states? They are checked, unchecked, and indeterminate. Indeterminate state is not commonly used and cannot be set via HTML attributes. Hence we need to obtain a reference to the checkbox instance and do \",(0,t.jsx)(e.code,{children:\"checkboxInputElement.indeterminate = true\"}),\". This can be done in React via the \",(0,t.jsx)(e.code,{children:\"useRef\"}),\" hook.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We can write a new function called \",(0,t.jsx)(e.code,{children:\"determineListSelectionState\"}),\" that accepts the \",(0,t.jsx)(e.code,{children:\"items\"}),\" and determine the selection state of the list, whether no items are selected, some items are selected, or all items are selected. With this selection. With this state, we can render the appropriate appearance for the bulk selection checkbox. This state is also useful for determining what happens when the bulk selection checkbox is clicked/triggered. We can create a new function called \",(0,t.jsx)(e.code,{children:\"setAllItemsSelectionState\"}),\" to return a new set of list items which are set to a specific selection state.\"]}),`\n`,(0,t.jsx)(p,{}),`\n`,(0,t.jsx)(x,{}),`\n`,(0,t.jsx)(w,{})]})}function L(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(k,n)})):k(n)}var O=L;return D(A);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var j=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var T=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),S=(n,e)=>{for(var l in e)a(n,l,{get:e[l],enumerable:!0})},u=(n,e,l,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of _(e))!C.call(n,o)&&o!==l&&a(n,o,{get:()=>e[o],enumerable:!(h=y(e,o))||h.enumerable});return n};var d=(n,e,l)=>(l=n!=null?j(M(n)):{},u(e||!n||!n.__esModule?a(l,\"default\",{value:n,enumerable:!0}):l,n)),D=n=>u(a({},\"__esModule\",{value:!0}),n);var r=T((W,m)=>{m.exports=_jsx_runtime});var A={};S(A,{default:()=>O});var t=d(r());var i=d(r());function f(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Adding items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"New items can be added to their respective lists.\"}),`\n`,(0,i.jsx)(e.li,{children:\"New items are added to the bottom of the lists.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`,(0,i.jsxs)(e.li,{children:['\"Bulk selection\" checkbox',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Shows empty/indeterminate/checked when there are no/some/all items checked respectively.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking on it unselects / selects all the items depending on the selection state of the items.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Checkbox is disabled when there are no items in the list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Selection counts and total counts are reflected correctly.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(f,n)})):f(n)}var p=v;var c=d(r());function b(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.h2,{children:\"Accessibility\"}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[\"Use of \",(0,c.jsx)(e.code,{children:\"<form>\"}),\" submit for adding new items to the list.\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:'<input type=\"checkbox\">'}),\" are paired with \",(0,c.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also selects/deselect the item.\"]}),`\n`,(0,c.jsxs)(e.li,{children:[\"Since the \",(0,c.jsx)(e.code,{children:\"<button>\"}),\"s do not have a visible label, use \",(0,c.jsx)(e.code,{children:\"aria-label\"}),\"s to indicate their purpose. As a result, make the button contents hidden from screen readers via \",(0,c.jsx)(e.code,{children:'aria-hidden=\"true\"'}),\".\"]}),`\n`,(0,c.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function X(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(b,n)})):b(n)}var x=X;var s=d(r());function g(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"User Experience\"}),`\n`,(0,s.jsx)(e.p,{children:\"To ensure a good user experience, we can implement the following:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"Disallow non-empty items to be added to the list.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Input stays focused after an item has been added.\"}),`\n`]})]})}function F(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(g,n)})):g(n)}var w=F;function k(n){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",h3:\"h3\",code:\"code\",h4:\"h4\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The following explanation assumes you have a good understanding of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/transfer-list/react/solution\",children:\"Transfer List's React solution\"}),\".\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The state structure remains the same and the choice of \",(0,t.jsx)(e.code,{children:\"Map\"}),\" is flexible enough to handle the new use case of adding items to the list.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,t.jsx)(e.p,{children:\"The main additions in this question are:\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Input form\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"We'll wrap the \",(0,t.jsx)(e.code,{children:\"<input>\"}),\" in a \",(0,t.jsx)(e.code,{children:\"<form>\"}),\" for built-in keyboard handling, a11y, and UX.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Bulk Selection Checkbox\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Did you know that an HTML checkbox actually has 3 states? They are checked, unchecked, and indeterminate. Indeterminate state is not commonly used and cannot be set via HTML attributes. Hence we need to obtain a reference to the checkbox instance and do \",(0,t.jsx)(e.code,{children:\"checkboxInputElement.indeterminate = true\"}),\". This can be done in React via the \",(0,t.jsx)(e.code,{children:\"useRef\"}),\" hook.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We can write a new function called \",(0,t.jsx)(e.code,{children:\"determineListSelectionState\"}),\" that accepts the \",(0,t.jsx)(e.code,{children:\"items\"}),\" and determine the selection state of the list, whether no items are selected, some items are selected, or all items are selected. With this selection. With this state, we can render the appropriate appearance for the bulk selection checkbox. This state is also useful for determining what happens when the bulk selection checkbox is clicked/triggered. We can create a new function called \",(0,t.jsx)(e.code,{children:\"setAllItemsSelectionState\"}),\" to return a new set of list items which are set to a specific selection state.\"]}),`\n`,(0,t.jsx)(p,{}),`\n`,(0,t.jsx)(x,{}),`\n`,(0,t.jsx)(w,{})]})}function L(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(k,n)})):k(n)}var O=L;return D(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/svelte/solution.json b/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/svelte/solution.json
index 0f25f4c58..4ba3b8763 100644
--- a/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/svelte/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/svelte/solution.json
@@ -28,5 +28,5 @@
     "activeFile": "/src/App.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var k=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),S=(n,e)=>{for(var l in e)a(n,l,{get:e[l],enumerable:!0})},u=(n,e,l,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of _(e))!C.call(n,r)&&r!==l&&a(n,r,{get:()=>e[r],enumerable:!(h=y(e,r))||h.enumerable});return n};var d=(n,e,l)=>(l=n!=null?k(M(n)):{},u(e||!n||!n.__esModule?a(l,\"default\",{value:n,enumerable:!0}):l,n)),T=n=>u(a({},\"__esModule\",{value:!0}),n);var o=v((W,m)=>{m.exports=_jsx_runtime});var A={};S(A,{default:()=>O});var t=d(o());var i=d(o());function f(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Adding items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"New items can be added to their respective lists.\"}),`\n`,(0,i.jsx)(e.li,{children:\"New items are added to the bottom of the lists.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`,(0,i.jsxs)(e.li,{children:['\"Bulk selection\" checkbox',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Shows empty/indeterminate/checked when there are no/some/all items checked respectively.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking on it unselects / selects all the items depending on the selection state of the items.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Checkbox is disabled when there are no items in the list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Selection counts and total counts are reflected correctly.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(f,n)})):f(n)}var p=D;var s=d(o());function b(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"A11y\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Use of \",(0,s.jsx)(e.code,{children:\"<form>\"}),\" submit for adding new items to the list.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:'<input type=\"checkbox\">'}),\" are paired with \",(0,s.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also selects/deselect the item.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"Since the \",(0,s.jsx)(e.code,{children:\"<button>\"}),\"s do not have a visible label, use \",(0,s.jsx)(e.code,{children:\"aria-label\"}),\"s to indicate their purpose. As a result, make the button contents hidden from screen readers via \",(0,s.jsx)(e.code,{children:'aria-hidden=\"true\"'}),\".\"]}),`\n`,(0,s.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function L(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(b,n)})):b(n)}var x=L;var c=d(o());function g(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.h2,{children:\"User Experience\"}),`\n`,(0,c.jsx)(e.p,{children:\"To ensure a good user experience, we can implement the following:\"}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsx)(e.li,{children:\"Disallow non-empty items to be added to the list.\"}),`\n`,(0,c.jsx)(e.li,{children:\"Input stays focused after an item has been added.\"}),`\n`]})]})}function X(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(g,n)})):g(n)}var w=X;function j(n){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",h3:\"h3\",code:\"code\",h4:\"h4\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The following explanation assumes you have a good understanding of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/transfer-list/svelte/solution\",children:\"Transfer List's Svelte solution\"}),\".\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The state structure remains the same and the choice of \",(0,t.jsx)(e.code,{children:\"Map\"}),\" is flexible enough to handle the new use case of adding items to the list.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,t.jsx)(e.p,{children:\"The main additions in this question are:\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Input form\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"We'll wrap the \",(0,t.jsx)(e.code,{children:\"<input>\"}),\" in a \",(0,t.jsx)(e.code,{children:\"<form>\"}),\" for built-in keyboard handling, a11y, and UX.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Bulk Selection Checkbox\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Did you know that an HTML checkbox actually has 3 states? They are checked, unchecked, and indeterminate. Indeterminate state is not commonly used and cannot be set via HTML attributes. Luckily, Svelte provides a way to set the indeterminate state via the \",(0,t.jsx)(e.code,{children:\"indeterminate\"}),\" attribute in template.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We can write a new function called \",(0,t.jsx)(e.code,{children:\"determineListSelectionState\"}),\" that accepts the \",(0,t.jsx)(e.code,{children:\"items\"}),\" and determine the selection state of the list, whether no items are selected, some items are selected, or all items are selected. With this selection. With this state, we can render the appropriate appearance for the bulk selection checkbox. This state is also useful for determining what happens when the bulk selection checkbox is clicked/triggered. We can create a new function called \",(0,t.jsx)(e.code,{children:\"setAllItemsSelectionState\"}),\" to return a new set of list items which are set to a specific selection state.\"]}),`\n`,(0,t.jsx)(p,{}),`\n`,(0,t.jsx)(x,{}),`\n`,(0,t.jsx)(w,{})]})}function F(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(j,n)})):j(n)}var O=F;return T(A);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var k=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),S=(n,e)=>{for(var l in e)a(n,l,{get:e[l],enumerable:!0})},u=(n,e,l,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of _(e))!C.call(n,r)&&r!==l&&a(n,r,{get:()=>e[r],enumerable:!(h=y(e,r))||h.enumerable});return n};var d=(n,e,l)=>(l=n!=null?k(M(n)):{},u(e||!n||!n.__esModule?a(l,\"default\",{value:n,enumerable:!0}):l,n)),T=n=>u(a({},\"__esModule\",{value:!0}),n);var o=v((W,m)=>{m.exports=_jsx_runtime});var A={};S(A,{default:()=>O});var t=d(o());var i=d(o());function f(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Adding items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"New items can be added to their respective lists.\"}),`\n`,(0,i.jsx)(e.li,{children:\"New items are added to the bottom of the lists.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`,(0,i.jsxs)(e.li,{children:['\"Bulk selection\" checkbox',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Shows empty/indeterminate/checked when there are no/some/all items checked respectively.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking on it unselects / selects all the items depending on the selection state of the items.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Checkbox is disabled when there are no items in the list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Selection counts and total counts are reflected correctly.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(f,n)})):f(n)}var p=D;var s=d(o());function b(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"Accessibility\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Use of \",(0,s.jsx)(e.code,{children:\"<form>\"}),\" submit for adding new items to the list.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:'<input type=\"checkbox\">'}),\" are paired with \",(0,s.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also selects/deselect the item.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"Since the \",(0,s.jsx)(e.code,{children:\"<button>\"}),\"s do not have a visible label, use \",(0,s.jsx)(e.code,{children:\"aria-label\"}),\"s to indicate their purpose. As a result, make the button contents hidden from screen readers via \",(0,s.jsx)(e.code,{children:'aria-hidden=\"true\"'}),\".\"]}),`\n`,(0,s.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function L(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(b,n)})):b(n)}var x=L;var c=d(o());function g(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.h2,{children:\"User Experience\"}),`\n`,(0,c.jsx)(e.p,{children:\"To ensure a good user experience, we can implement the following:\"}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsx)(e.li,{children:\"Disallow non-empty items to be added to the list.\"}),`\n`,(0,c.jsx)(e.li,{children:\"Input stays focused after an item has been added.\"}),`\n`]})]})}function X(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(g,n)})):g(n)}var w=X;function j(n){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",h3:\"h3\",code:\"code\",h4:\"h4\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The following explanation assumes you have a good understanding of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/transfer-list/svelte/solution\",children:\"Transfer List's Svelte solution\"}),\".\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The state structure remains the same and the choice of \",(0,t.jsx)(e.code,{children:\"Map\"}),\" is flexible enough to handle the new use case of adding items to the list.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,t.jsx)(e.p,{children:\"The main additions in this question are:\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Input form\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"We'll wrap the \",(0,t.jsx)(e.code,{children:\"<input>\"}),\" in a \",(0,t.jsx)(e.code,{children:\"<form>\"}),\" for built-in keyboard handling, a11y, and UX.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Bulk Selection Checkbox\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Did you know that an HTML checkbox actually has 3 states? They are checked, unchecked, and indeterminate. Indeterminate state is not commonly used and cannot be set via HTML attributes. Luckily, Svelte provides a way to set the indeterminate state via the \",(0,t.jsx)(e.code,{children:\"indeterminate\"}),\" attribute in template.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We can write a new function called \",(0,t.jsx)(e.code,{children:\"determineListSelectionState\"}),\" that accepts the \",(0,t.jsx)(e.code,{children:\"items\"}),\" and determine the selection state of the list, whether no items are selected, some items are selected, or all items are selected. With this selection. With this state, we can render the appropriate appearance for the bulk selection checkbox. This state is also useful for determining what happens when the bulk selection checkbox is clicked/triggered. We can create a new function called \",(0,t.jsx)(e.code,{children:\"setAllItemsSelectionState\"}),\" to return a new set of list items which are set to a specific selection state.\"]}),`\n`,(0,t.jsx)(p,{}),`\n`,(0,t.jsx)(x,{}),`\n`,(0,t.jsx)(w,{})]})}function F(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(j,n)})):j(n)}var O=F;return T(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/vue/solution.json b/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/vue/solution.json
index 1f5157206..7623c8ac8 100644
--- a/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/vue/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/transfer-list-ii/vue/solution.json
@@ -28,5 +28,5 @@
     "activeFile": "/src/App.vue",
     "environment": "vue-cli"
   },
-  "writeup": "var Component=(()=>{var k=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var T=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var l in e)a(n,l,{get:e[l],enumerable:!0})},u=(n,e,l,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of _(e))!C.call(n,r)&&r!==l&&a(n,r,{get:()=>e[r],enumerable:!(h=y(e,r))||h.enumerable});return n};var d=(n,e,l)=>(l=n!=null?k(M(n)):{},u(e||!n||!n.__esModule?a(l,\"default\",{value:n,enumerable:!0}):l,n)),S=n=>u(a({},\"__esModule\",{value:!0}),n);var o=T((W,m)=>{m.exports=_jsx_runtime});var A={};v(A,{default:()=>O});var t=d(o());var i=d(o());function f(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Adding items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"New items can be added to their respective lists.\"}),`\n`,(0,i.jsx)(e.li,{children:\"New items are added to the bottom of the lists.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`,(0,i.jsxs)(e.li,{children:['\"Bulk selection\" checkbox',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Shows empty/indeterminate/checked when there are no/some/all items checked respectively.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking on it unselects / selects all the items depending on the selection state of the items.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Checkbox is disabled when there are no items in the list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Selection counts and total counts are reflected correctly.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(f,n)})):f(n)}var p=D;var s=d(o());function b(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"A11y\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Use of \",(0,s.jsx)(e.code,{children:\"<form>\"}),\" submit for adding new items to the list.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:'<input type=\"checkbox\">'}),\" are paired with \",(0,s.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also selects/deselect the item.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"Since the \",(0,s.jsx)(e.code,{children:\"<button>\"}),\"s do not have a visible label, use \",(0,s.jsx)(e.code,{children:\"aria-label\"}),\"s to indicate their purpose. As a result, make the button contents hidden from screen readers via \",(0,s.jsx)(e.code,{children:'aria-hidden=\"true\"'}),\".\"]}),`\n`,(0,s.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function L(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(b,n)})):b(n)}var x=L;var c=d(o());function g(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.h2,{children:\"User Experience\"}),`\n`,(0,c.jsx)(e.p,{children:\"To ensure a good user experience, we can implement the following:\"}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsx)(e.li,{children:\"Disallow non-empty items to be added to the list.\"}),`\n`,(0,c.jsx)(e.li,{children:\"Input stays focused after an item has been added.\"}),`\n`]})]})}function X(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(g,n)})):g(n)}var w=X;function j(n){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",h3:\"h3\",code:\"code\",h4:\"h4\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The following explanation assumes you have a good understanding of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/transfer-list/vue/solution\",children:\"Transfer List's Vue solution\"}),\".\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The state structure remains the same and the choice of \",(0,t.jsx)(e.code,{children:\"Map\"}),\" is flexible enough to handle the new use case of adding items to the list.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,t.jsx)(e.p,{children:\"The main additions in this question are:\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Input form\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"We'll wrap the \",(0,t.jsx)(e.code,{children:\"<input>\"}),\" in a \",(0,t.jsx)(e.code,{children:\"<form>\"}),\" for built-in keyboard handling, a11y, and UX.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Bulk Selection Checkbox\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Did you know that an HTML checkbox actually has 3 states? They are checked, unchecked, and indeterminate. Indeterminate state is not commonly used and cannot be set via HTML attributes. Luckily, Vue provides a way to set the indeterminate state via the \",(0,t.jsx)(e.code,{children:\"indeterminate\"}),\" attribute in template.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We can write a new function called \",(0,t.jsx)(e.code,{children:\"determineListSelectionState\"}),\" that accepts the \",(0,t.jsx)(e.code,{children:\"items\"}),\" and determine the selection state of the list, whether no items are selected, some items are selected, or all items are selected. With this selection. With this state, we can render the appropriate appearance for the bulk selection checkbox. This state is also useful for determining what happens when the bulk selection checkbox is clicked/triggered. We can create a new function called \",(0,t.jsx)(e.code,{children:\"setAllItemsSelectionState\"}),\" to return a new set of list items which are set to a specific selection state.\"]}),`\n`,(0,t.jsx)(p,{}),`\n`,(0,t.jsx)(x,{}),`\n`,(0,t.jsx)(w,{})]})}function F(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(j,n)})):j(n)}var O=F;return S(A);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var k=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var T=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var l in e)a(n,l,{get:e[l],enumerable:!0})},u=(n,e,l,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of _(e))!C.call(n,r)&&r!==l&&a(n,r,{get:()=>e[r],enumerable:!(h=y(e,r))||h.enumerable});return n};var d=(n,e,l)=>(l=n!=null?k(M(n)):{},u(e||!n||!n.__esModule?a(l,\"default\",{value:n,enumerable:!0}):l,n)),S=n=>u(a({},\"__esModule\",{value:!0}),n);var o=T((W,m)=>{m.exports=_jsx_runtime});var A={};v(A,{default:()=>O});var t=d(o());var i=d(o());function f(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Adding items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"New items can be added to their respective lists.\"}),`\n`,(0,i.jsx)(e.li,{children:\"New items are added to the bottom of the lists.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`,(0,i.jsxs)(e.li,{children:['\"Bulk selection\" checkbox',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Shows empty/indeterminate/checked when there are no/some/all items checked respectively.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Clicking on it unselects / selects all the items depending on the selection state of the items.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Checkbox is disabled when there are no items in the list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Selection counts and total counts are reflected correctly.\"}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function D(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(f,n)})):f(n)}var p=D;var s=d(o());function b(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"Accessibility\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Use of \",(0,s.jsx)(e.code,{children:\"<form>\"}),\" submit for adding new items to the list.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:'<input type=\"checkbox\">'}),\" are paired with \",(0,s.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also selects/deselect the item.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"Since the \",(0,s.jsx)(e.code,{children:\"<button>\"}),\"s do not have a visible label, use \",(0,s.jsx)(e.code,{children:\"aria-label\"}),\"s to indicate their purpose. As a result, make the button contents hidden from screen readers via \",(0,s.jsx)(e.code,{children:'aria-hidden=\"true\"'}),\".\"]}),`\n`,(0,s.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function L(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(b,n)})):b(n)}var x=L;var c=d(o());function g(n){let e=Object.assign({h2:\"h2\",p:\"p\",ul:\"ul\",li:\"li\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.h2,{children:\"User Experience\"}),`\n`,(0,c.jsx)(e.p,{children:\"To ensure a good user experience, we can implement the following:\"}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsx)(e.li,{children:\"Disallow non-empty items to be added to the list.\"}),`\n`,(0,c.jsx)(e.li,{children:\"Input stays focused after an item has been added.\"}),`\n`]})]})}function X(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(g,n)})):g(n)}var w=X;function j(n){let e=Object.assign({h2:\"h2\",p:\"p\",a:\"a\",h3:\"h3\",code:\"code\",h4:\"h4\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The following explanation assumes you have a good understanding of \",(0,t.jsx)(e.a,{href:\"/questions/user-interface/transfer-list/vue/solution\",children:\"Transfer List's Vue solution\"}),\".\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The state structure remains the same and the choice of \",(0,t.jsx)(e.code,{children:\"Map\"}),\" is flexible enough to handle the new use case of adding items to the list.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,t.jsx)(e.p,{children:\"The main additions in this question are:\"}),`\n`,(0,t.jsx)(e.h4,{children:\"Input form\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"We'll wrap the \",(0,t.jsx)(e.code,{children:\"<input>\"}),\" in a \",(0,t.jsx)(e.code,{children:\"<form>\"}),\" for built-in keyboard handling, a11y, and UX.\"]}),`\n`,(0,t.jsx)(e.h4,{children:\"Bulk Selection Checkbox\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Did you know that an HTML checkbox actually has 3 states? They are checked, unchecked, and indeterminate. Indeterminate state is not commonly used and cannot be set via HTML attributes. Luckily, Vue provides a way to set the indeterminate state via the \",(0,t.jsx)(e.code,{children:\"indeterminate\"}),\" attribute in template.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We can write a new function called \",(0,t.jsx)(e.code,{children:\"determineListSelectionState\"}),\" that accepts the \",(0,t.jsx)(e.code,{children:\"items\"}),\" and determine the selection state of the list, whether no items are selected, some items are selected, or all items are selected. With this selection. With this state, we can render the appropriate appearance for the bulk selection checkbox. This state is also useful for determining what happens when the bulk selection checkbox is clicked/triggered. We can create a new function called \",(0,t.jsx)(e.code,{children:\"setAllItemsSelectionState\"}),\" to return a new set of list items which are set to a specific selection state.\"]}),`\n`,(0,t.jsx)(p,{}),`\n`,(0,t.jsx)(x,{}),`\n`,(0,t.jsx)(w,{})]})}function F(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(j,n)})):j(n)}var O=F;return S(A);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/transfer-list/react/solution.json b/apps/web/src/__generated__/questions/user-interface/transfer-list/react/solution.json
index ba85329c9..8dfd8426d 100644
--- a/apps/web/src/__generated__/questions/user-interface/transfer-list/react/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/transfer-list/react/solution.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var x=Object.create;var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var k=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},h=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of j(e))!w.call(t,c)&&c!==r&&l(t,c,{get:()=>e[c],enumerable:!(d=y(e,c))||d.enumerable});return t};var a=(t,e,r)=>(r=t!=null?x(v(t)):{},h(e||!t||!t.__esModule?l(r,\"default\",{value:t,enumerable:!0}):r,t)),M=t=>h(l({},\"__esModule\",{value:!0}),t);var o=k((D,u)=>{u.exports=_jsx_runtime});var I={};_(I,{default:()=>O});var n=a(o());var i=a(o());function m(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transferring all items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when the source list is empty.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, all items from the source list are transferred to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(m,t)})):m(t)}var f=T;var s=a(o());function b(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"A11y\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:'<input type=\"checkbox\">'}),\" are paired with \",(0,s.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also selects/deselect the item.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"Since the \",(0,s.jsx)(e.code,{children:\"<button>\"}),\"s do not have a visible label, use \",(0,s.jsx)(e.code,{children:\"aria-label\"}),\"s to indicate their purpose. As a result, make the button contents hidden from screen readers via \",(0,s.jsx)(e.code,{children:'aria-hidden=\"true\"'}),\".\"]}),`\n`,(0,s.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function S(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var p=S;function g(t){let e=Object.assign({h2:\"h2\",p:\"p\",h3:\"h3\",code:\"code\",ul:\"ul\",li:\"li\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"Overall, the trickiest part of this question is to select the right data structure to use considering the operations we need to do on the data.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"State\"}),`\n`,(0,n.jsx)(e.p,{children:\"The intuitive thing to do would be to use an arrays for each list since arrays are the most natural data structure to represent a list of ordered items. However, marking items as checked/unchecked and removing items from the list will require O(N) time if an array is used.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Since the items are unique, a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" data structure is feasible as it gives us O(1) access, insertion, and removal of items. Moreover, JavaScript \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s are ordered, so the items order can be preserved. The key will be the item name and value is a boolean indicating whether the item is selected/checked. We only need two JavaScript \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s in total, one for each list.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"There's nothing particularly special about rendering the UI for the transfer lists. Flexboxes can help us render the three columns. Since the UI and the functionality of columns are identical, we can define a component \",(0,n.jsx)(e.code,{children:\"ItemList\"}),\" that takes in a list of items and a setter callback to manipulate the list.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"To determine if the buttons should be disabled:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Transfer all buttons: check if the source list is empty.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Transfer selected buttons: write a helper function \",(0,n.jsx)(e.code,{children:\"hasNoSelectedItems\"}),\", to count if the source list has any selected items, and disable the transfer buttons.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Transferring Items\"}),`\n`,(0,n.jsx)(e.p,{children:\"We can write a function per desired transfer functionality that accepts source/destination lists and their respective setters. These functions reduce code duplication and can be easily reused if there are more than two columns in future.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"transferAllItems\"}),\": combine the items from source and destination lists to create a new destination list.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"transferSelectedItems\"}),\": move the selected items from source to destination lists by removing them from the source list and adding them to the destination list.\"]}),`\n`]}),`\n`,(0,n.jsx)(f,{}),`\n`,(0,n.jsx)(p,{})]})}function C(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(g,t)})):g(t)}var O=C;return M(I);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var x=Object.create;var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var k=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},h=(t,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of j(e))!w.call(t,c)&&c!==r&&l(t,c,{get:()=>e[c],enumerable:!(d=y(e,c))||d.enumerable});return t};var a=(t,e,r)=>(r=t!=null?x(v(t)):{},h(e||!t||!t.__esModule?l(r,\"default\",{value:t,enumerable:!0}):r,t)),M=t=>h(l({},\"__esModule\",{value:!0}),t);var o=k((D,u)=>{u.exports=_jsx_runtime});var I={};_(I,{default:()=>O});var n=a(o());var i=a(o());function m(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transferring all items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when the source list is empty.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, all items from the source list are transferred to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function T(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(m,t)})):m(t)}var f=T;var s=a(o());function b(t){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},t.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"Accessibility\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[(0,s.jsx)(e.code,{children:'<input type=\"checkbox\">'}),\" are paired with \",(0,s.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also selects/deselect the item.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"Since the \",(0,s.jsx)(e.code,{children:\"<button>\"}),\"s do not have a visible label, use \",(0,s.jsx)(e.code,{children:\"aria-label\"}),\"s to indicate their purpose. As a result, make the button contents hidden from screen readers via \",(0,s.jsx)(e.code,{children:'aria-hidden=\"true\"'}),\".\"]}),`\n`,(0,s.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function S(t={}){let{wrapper:e}=t.components||{};return e?(0,s.jsx)(e,Object.assign({},t,{children:(0,s.jsx)(b,t)})):b(t)}var p=S;function g(t){let e=Object.assign({h2:\"h2\",p:\"p\",h3:\"h3\",code:\"code\",ul:\"ul\",li:\"li\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"Overall, the trickiest part of this question is to select the right data structure to use considering the operations we need to do on the data.\"}),`\n`,(0,n.jsx)(e.h3,{children:\"State\"}),`\n`,(0,n.jsx)(e.p,{children:\"The intuitive thing to do would be to use an arrays for each list since arrays are the most natural data structure to represent a list of ordered items. However, marking items as checked/unchecked and removing items from the list will require O(N) time if an array is used.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Since the items are unique, a \",(0,n.jsx)(e.code,{children:\"Map\"}),\" data structure is feasible as it gives us O(1) access, insertion, and removal of items. Moreover, JavaScript \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s are ordered, so the items order can be preserved. The key will be the item name and value is a boolean indicating whether the item is selected/checked. We only need two JavaScript \",(0,n.jsx)(e.code,{children:\"Map\"}),\"s in total, one for each list.\"]}),`\n`,(0,n.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"There's nothing particularly special about rendering the UI for the transfer lists. Flexboxes can help us render the three columns. Since the UI and the functionality of columns are identical, we can define a component \",(0,n.jsx)(e.code,{children:\"ItemList\"}),\" that takes in a list of items and a setter callback to manipulate the list.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"To determine if the buttons should be disabled:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Transfer all buttons: check if the source list is empty.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Transfer selected buttons: write a helper function \",(0,n.jsx)(e.code,{children:\"hasNoSelectedItems\"}),\", to count if the source list has any selected items, and disable the transfer buttons.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h3,{children:\"Transferring Items\"}),`\n`,(0,n.jsx)(e.p,{children:\"We can write a function per desired transfer functionality that accepts source/destination lists and their respective setters. These functions reduce code duplication and can be easily reused if there are more than two columns in future.\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"transferAllItems\"}),\": combine the items from source and destination lists to create a new destination list.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"transferSelectedItems\"}),\": move the selected items from source to destination lists by removing them from the source list and adding them to the destination list.\"]}),`\n`]}),`\n`,(0,n.jsx)(f,{}),`\n`,(0,n.jsx)(p,{})]})}function C(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(g,t)})):g(t)}var O=C;return M(I);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/transfer-list/svelte/solution.json b/apps/web/src/__generated__/questions/user-interface/transfer-list/svelte/solution.json
index 3fc1ec699..5b50fe720 100644
--- a/apps/web/src/__generated__/questions/user-interface/transfer-list/svelte/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/transfer-list/svelte/solution.json
@@ -28,5 +28,5 @@
     "activeFile": "/src/App.svelte",
     "environment": "svelte"
   },
-  "writeup": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var s in e)l(n,s,{get:e[s],enumerable:!0})},h=(n,e,s,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!j.call(n,r)&&r!==s&&l(n,r,{get:()=>e[r],enumerable:!(d=g(e,r))||d.enumerable});return n};var o=(n,e,s)=>(s=n!=null?p(y(n)):{},h(e||!n||!n.__esModule?l(s,\"default\",{value:n,enumerable:!0}):s,n)),_=n=>h(l({},\"__esModule\",{value:!0}),n);var c=v((O,u)=>{u.exports=_jsx_runtime});var S={};w(S,{default:()=>T});var t=o(c());var i=o(c());function m(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transferring all items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when the source list is empty.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, all items from the source list are transferred to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function k(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(m,n)})):m(n)}var f=k;var a=o(c());function b(n){let e=Object.assign({h2:\"h2\",p:\"p\",h3:\"h3\",code:\"code\",ul:\"ul\",li:\"li\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsx)(e.p,{children:\"Overall, the trickiest part of this question is to select the right data structure to use considering the operations we need to do on the data.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsx)(e.p,{children:\"The intuitive thing to do would be to use an arrays for each list since arrays are the most natural data structure to represent a list of ordered items. However, marking items as checked/unchecked and removing items from the list will require O(N) time if an array is used.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Since the items are unique, a \",(0,t.jsx)(e.code,{children:\"Map\"}),\" data structure is feasible as it gives us O(1) access, insertion, and removal of items. Moreover, JavaScript \",(0,t.jsx)(e.code,{children:\"Map\"}),\"s are ordered, so the items order can be preserved. The key will be the item name and value is a boolean indicating whether the item is selected/checked. We only need two JavaScript \",(0,t.jsx)(e.code,{children:\"Map\"}),\"s in total, one for each list.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"There's nothing particularly special about rendering the UI for the transfer lists. Flexboxes can help us render the three columns. Since the UI and the functionality of the columns are identical, we can define a component called \",(0,t.jsx)(e.code,{children:\"ItemList.svelte\"}),\" that binds to the list of items, displaying and manipulating the list itself.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"To determine if the buttons should be disabled:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Transfer all buttons: check if the source list is empty.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Transfer selected buttons: write a helper function \",(0,t.jsx)(e.code,{children:\"hasNoSelectedItems\"}),\", to count if the source list has any selected items, and disable the transfer buttons.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Transferring Items\"}),`\n`,(0,t.jsx)(e.p,{children:\"We can write a function per desired transfer functionality that accepts source/destination lists and their respective setters. These functions reduce code duplication and can be easily reused if there are more than two columns in future.\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"transferAllItems\"}),\": combine the items from source and destination lists to create a new destination list.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"transferSelectedItems\"}),\": move the selected items from source to destination lists by removing them from the source list and adding them to the destination list.\"]}),`\n`]}),`\n`,(0,t.jsx)(f,{})]})}function M(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(b,n)})):b(n)}var T=M;return _(S);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var s in e)c(n,s,{get:e[s],enumerable:!0})},h=(n,e,s,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of x(e))!j.call(n,r)&&r!==s&&c(n,r,{get:()=>e[r],enumerable:!(d=g(e,r))||d.enumerable});return n};var o=(n,e,s)=>(s=n!=null?p(y(n)):{},h(e||!n||!n.__esModule?c(s,\"default\",{value:n,enumerable:!0}):s,n)),_=n=>h(c({},\"__esModule\",{value:!0}),n);var l=v((O,u)=>{u.exports=_jsx_runtime});var S={};w(S,{default:()=>T});var t=o(l());var i=o(l());function m(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Selecting items\",`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Items can be checked/unchecked.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transfer selected items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when no items are selected in the source list.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, selected items are transferred from the source list to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`,(0,i.jsxs)(e.li,{children:['\"Transferring all items\" buttons',`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsx)(e.li,{children:\"Button is disabled when the source list is empty.\"}),`\n`,(0,i.jsx)(e.li,{children:\"Upon clicking, all items from the source list are transferred to the bottom of the destination list.\"}),`\n`]}),`\n`]}),`\n`]})]})}function k(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(m,n)})):m(n)}var f=k;var a=o(l());function b(n){let e=Object.assign({h2:\"h2\",p:\"p\",h3:\"h3\",code:\"code\",ul:\"ul\",li:\"li\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsx)(e.p,{children:\"Overall, the trickiest part of this question is to select the right data structure to use considering the operations we need to do on the data.\"}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsx)(e.p,{children:\"The intuitive thing to do would be to use an arrays for each list since arrays are the most natural data structure to represent a list of ordered items. However, marking items as checked/unchecked and removing items from the list will require O(N) time if an array is used.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Since the items are unique, a \",(0,t.jsx)(e.code,{children:\"Map\"}),\" data structure is feasible as it gives us O(1) access, insertion, and removal of items. Moreover, JavaScript \",(0,t.jsx)(e.code,{children:\"Map\"}),\"s are ordered, so the items order can be preserved. The key will be the item name and value is a boolean indicating whether the item is selected/checked. We only need two JavaScript \",(0,t.jsx)(e.code,{children:\"Map\"}),\"s in total, one for each list.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Rendering\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"There's nothing particularly special about rendering the UI for the transfer lists. Flexboxes can help us render the three columns. Since the UI and the functionality of the columns are identical, we can define a component called \",(0,t.jsx)(e.code,{children:\"ItemList.svelte\"}),\" that binds to the list of items, displaying and manipulating the list itself.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"To determine if the buttons should be disabled:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Transfer all buttons: check if the source list is empty.\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Transfer selected buttons: write a helper function \",(0,t.jsx)(e.code,{children:\"hasNoSelectedItems\"}),\", to count if the source list has any selected items, and disable the transfer buttons.\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Transferring Items\"}),`\n`,(0,t.jsx)(e.p,{children:\"We can write a function per desired transfer functionality that accepts source/destination lists and their respective setters. These functions reduce code duplication and can be easily reused if there are more than two columns in future.\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"transferAllItems\"}),\": combine the items from source and destination lists to create a new destination list.\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"transferSelectedItems\"}),\": move the selected items from source to destination lists by removing them from the source list and adding them to the destination list.\"]}),`\n`]}),`\n`,(0,t.jsx)(f,{})]})}function M(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(b,n)})):b(n)}var T=M;return _(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/apps/web/src/__generated__/questions/user-interface/users-database/react/solution.json b/apps/web/src/__generated__/questions/user-interface/users-database/react/solution.json
index b35b8a87f..11bd6be0b 100644
--- a/apps/web/src/__generated__/questions/user-interface/users-database/react/solution.json
+++ b/apps/web/src/__generated__/questions/user-interface/users-database/react/solution.json
@@ -25,5 +25,5 @@
     "activeFile": "/src/App.js",
     "environment": "create-react-app"
   },
-  "writeup": "var Component=(()=>{var j=Object.create;var c=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var M=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var l in e)c(n,l,{get:e[l],enumerable:!0})},u=(n,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of _(e))!v.call(n,a)&&a!==l&&c(n,a,{get:()=>e[a],enumerable:!(o=T(e,a))||o.enumerable});return n};var h=(n,e,l)=>(l=n!=null?j(C(n)):{},u(e||!n||!n.__esModule?c(l,\"default\",{value:n,enumerable:!0}):l,n)),F=n=>u(c({},\"__esModule\",{value:!0}),n);var d=M((q,f)=>{f.exports=_jsx_runtime});var S={};D(S,{default:()=>A});var r=h(d());var t=h(d());function m(n){let e=Object.assign({h2:\"h2\",p:\"p\",ol:\"ol\",li:\"li\",h3:\"h3\",ul:\"ul\",code:\"code\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsx)(e.p,{children:\"The solution can be broken down into a few parts:\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Collecting form data.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Performing actions.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Displaying the final result.\"}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsx)(e.p,{children:\"We need several pieces of information to keep track of the state of the application:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"selected\"}),\": the state variable for the selected user's id\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"search\"}),\": the state variable for the search term\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"first\"}),\": the state variable for the first name\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"last\"}),\": the state variable for the last name\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"users\"}),\": the state variable for the list of users\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Collecting form data\"}),`\n`,(0,t.jsx)(e.p,{children:\"We use several input fields for collecting the search term, the first and last names. The search term is used to filter the list of users. The first and last names are used to create / update users.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"By using \",(0,t.jsx)(e.code,{children:\"<input required />\"}),\" on first and last names, we ensure that the fields are validated and cannot be empty.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Performing actions\"}),`\n`,(0,t.jsx)(e.p,{children:\"As user is selected, the first and last name fields are updated with the selected user's data. These fields are empty if there is no selected user.\"}),`\n`,(0,t.jsx)(e.p,{children:\"We use simple buttons for creating / updating / deleting / canceling actions:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Create: if there is no selected user, and the first and last name are not empty, we create a new user and add it to the list of users. The button is disabled otherwise.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Update: if there is a selected user, and the new first and last names are not empty, we update the selected user's first and last name. The button is disabled otherwise.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Delete: if there is a selected user, we remove the selected user from the list of users. The button is disabled otherwise.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Cancel: we de-select the current selected user. The button is disabled if there is no selected user\"}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Displaying the final result\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"We use a simple select field for the list of users. The value of the select field is the \",(0,t.jsx)(e.code,{children:\"selected\"}),\" state variable. The list of users are computed based on the search term.\"]})]})}function k(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(m,n)})):m(n)}var p=k;var s=h(d());function b(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Search input\",`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"The value is updated as the user types\"}),`\n`,(0,s.jsx)(e.li,{children:\"The list of users are updated on search input changes\"}),`\n`]}),`\n`]}),`\n`,(0,s.jsxs)(e.li,{children:[\"Listbox\",`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"Only one user can be selected at a time\"}),`\n`,(0,s.jsx)(e.li,{children:\"Upon search input changes, show the correctly filtered result of all users in the database\"}),`\n`]}),`\n`]}),`\n`,(0,s.jsxs)(e.li,{children:[\"First name and last name inputs\",`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"The first name and last name inputs are empty by default and updated as the user types\"}),`\n`,(0,s.jsx)(e.li,{children:\"The first name and last name are required fields for create / update upon form submission\"}),`\n`]}),`\n`]}),`\n`,(0,s.jsxs)(e.li,{children:[\"Form\",`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"The create button is disabled when first name or last name is empty. New user is added to the list when the create button is clicked\"}),`\n`,(0,s.jsx)(e.li,{children:\"The update buttons are disabled when first name or last name is empty or no user is selected. The selected user is updated when the update button is clicked\"}),`\n`,(0,s.jsx)(e.li,{children:\"The delete button is disabled when no user is selected. The selected user is deleted when the delete button is clicked.\"}),`\n`,(0,s.jsx)(e.li,{children:\"The cancel button is disabled when no user is selected. The selected user is cleared when the cancel button is clicked, first name and last name inputs are empty.\"}),`\n`]}),`\n`]}),`\n`]})]})}function O(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(b,n)})):b(n)}var g=O;var i=h(d());function w(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"A11y\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Use of \",(0,i.jsx)(e.code,{children:\"<form>\"}),\" submit for performing actions.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:'<input type=\"text\">'}),\" are paired with \",(0,i.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also focuses the input.\"]}),`\n`,(0,i.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function X(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(w,n)})):w(n)}var x=X;function y(n){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(p,{}),`\n`,(0,r.jsx)(g,{}),`\n`,(0,r.jsx)(x,{})]})}function L(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(y,n)})):y(n)}var A=L;return F(S);})();\n;return Component;"
+  "writeup": "var Component=(()=>{var j=Object.create;var c=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var M=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var l in e)c(n,l,{get:e[l],enumerable:!0})},u=(n,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of _(e))!v.call(n,a)&&a!==l&&c(n,a,{get:()=>e[a],enumerable:!(o=T(e,a))||o.enumerable});return n};var h=(n,e,l)=>(l=n!=null?j(C(n)):{},u(e||!n||!n.__esModule?c(l,\"default\",{value:n,enumerable:!0}):l,n)),F=n=>u(c({},\"__esModule\",{value:!0}),n);var d=M((q,f)=>{f.exports=_jsx_runtime});var S={};D(S,{default:()=>A});var r=h(d());var t=h(d());function m(n){let e=Object.assign({h2:\"h2\",p:\"p\",ol:\"ol\",li:\"li\",h3:\"h3\",ul:\"ul\",code:\"code\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{children:\"Solution\"}),`\n`,(0,t.jsx)(e.p,{children:\"The solution can be broken down into a few parts:\"}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Collecting form data.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Performing actions.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Displaying the final result.\"}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"State\"}),`\n`,(0,t.jsx)(e.p,{children:\"We need several pieces of information to keep track of the state of the application:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"selected\"}),\": the state variable for the selected user's id\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"search\"}),\": the state variable for the search term\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"first\"}),\": the state variable for the first name\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"last\"}),\": the state variable for the last name\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.code,{children:\"users\"}),\": the state variable for the list of users\"]}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Collecting form data\"}),`\n`,(0,t.jsx)(e.p,{children:\"We use several input fields for collecting the search term, the first and last names. The search term is used to filter the list of users. The first and last names are used to create / update users.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"By using \",(0,t.jsx)(e.code,{children:\"<input required />\"}),\" on first and last names, we ensure that the fields are validated and cannot be empty.\"]}),`\n`,(0,t.jsx)(e.h3,{children:\"Performing actions\"}),`\n`,(0,t.jsx)(e.p,{children:\"As user is selected, the first and last name fields are updated with the selected user's data. These fields are empty if there is no selected user.\"}),`\n`,(0,t.jsx)(e.p,{children:\"We use simple buttons for creating / updating / deleting / canceling actions:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:\"Create: if there is no selected user, and the first and last name are not empty, we create a new user and add it to the list of users. The button is disabled otherwise.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Update: if there is a selected user, and the new first and last names are not empty, we update the selected user's first and last name. The button is disabled otherwise.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Delete: if there is a selected user, we remove the selected user from the list of users. The button is disabled otherwise.\"}),`\n`,(0,t.jsx)(e.li,{children:\"Cancel: we de-select the current selected user. The button is disabled if there is no selected user\"}),`\n`]}),`\n`,(0,t.jsx)(e.h3,{children:\"Displaying the final result\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"We use a simple select field for the list of users. The value of the select field is the \",(0,t.jsx)(e.code,{children:\"selected\"}),\" state variable. The list of users are computed based on the search term.\"]})]})}function k(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(m,n)})):m(n)}var p=k;var s=h(d());function b(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"Test Cases\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Search input\",`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"The value is updated as the user types\"}),`\n`,(0,s.jsx)(e.li,{children:\"The list of users are updated on search input changes\"}),`\n`]}),`\n`]}),`\n`,(0,s.jsxs)(e.li,{children:[\"Listbox\",`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"Only one user can be selected at a time\"}),`\n`,(0,s.jsx)(e.li,{children:\"Upon search input changes, show the correctly filtered result of all users in the database\"}),`\n`]}),`\n`]}),`\n`,(0,s.jsxs)(e.li,{children:[\"First name and last name inputs\",`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"The first name and last name inputs are empty by default and updated as the user types\"}),`\n`,(0,s.jsx)(e.li,{children:\"The first name and last name are required fields for create / update upon form submission\"}),`\n`]}),`\n`]}),`\n`,(0,s.jsxs)(e.li,{children:[\"Form\",`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"The create button is disabled when first name or last name is empty. New user is added to the list when the create button is clicked\"}),`\n`,(0,s.jsx)(e.li,{children:\"The update buttons are disabled when first name or last name is empty or no user is selected. The selected user is updated when the update button is clicked\"}),`\n`,(0,s.jsx)(e.li,{children:\"The delete button is disabled when no user is selected. The selected user is deleted when the delete button is clicked.\"}),`\n`,(0,s.jsx)(e.li,{children:\"The cancel button is disabled when no user is selected. The selected user is cleared when the cancel button is clicked, first name and last name inputs are empty.\"}),`\n`]}),`\n`]}),`\n`]})]})}function O(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(b,n)})):b(n)}var g=O;var i=h(d());function w(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",code:\"code\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Accessibility\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Use of \",(0,i.jsx)(e.code,{children:\"<form>\"}),\" submit for performing actions.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:'<input type=\"text\">'}),\" are paired with \",(0,i.jsx)(e.code,{children:\"<label>\"}),\"s. Clicking on labels also focuses the input.\"]}),`\n`,(0,i.jsx)(e.li,{children:\"All required functionality should be achievable just by using the keyboard.\"}),`\n`]})]})}function X(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(w,n)})):w(n)}var x=X;function y(n){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(p,{}),`\n`,(0,r.jsx)(g,{}),`\n`,(0,r.jsx)(x,{})]})}function L(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(y,n)})):y(n)}var A=L;return F(S);})();\n;return Component;"
 }
\ No newline at end of file
diff --git a/packages/questions/javascript/backbone-model/metadata.json b/packages/questions/javascript/backbone-model/metadata.json
index 4347aae21..f1e9ed2d1 100644
--- a/packages/questions/javascript/backbone-model/metadata.json
+++ b/packages/questions/javascript/backbone-model/metadata.json
@@ -9,5 +9,6 @@
   "importance": "medium",
   "difficulty": "hard",
   "similar_questions": ["event-emitter", "event-emitter-ii"],
-  "next_questions": [""]
+  "next_questions": [],
+  "topics": ["oop"]
 }
diff --git a/packages/questions/javascript/camel-case-keys/metadata.json b/packages/questions/javascript/camel-case-keys/metadata.json
index d43b2142e..d837b9c2e 100644
--- a/packages/questions/javascript/camel-case-keys/metadata.json
+++ b/packages/questions/javascript/camel-case-keys/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "medium",
   "difficulty": "medium",
-  "similar_questions": ["deep-equal", "squash-object"]
+  "similar_questions": ["deep-equal", "squash-object"],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/cancellable-interval/metadata.json b/packages/questions/javascript/cancellable-interval/metadata.json
index 1343f1169..f69cb3af2 100644
--- a/packages/questions/javascript/cancellable-interval/metadata.json
+++ b/packages/questions/javascript/cancellable-interval/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "easy",
   "similar_questions": ["cancellable-timeout"],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/cancellable-timeout/metadata.json b/packages/questions/javascript/cancellable-timeout/metadata.json
index 0bbdfe2b6..598c560aa 100644
--- a/packages/questions/javascript/cancellable-timeout/metadata.json
+++ b/packages/questions/javascript/cancellable-timeout/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "easy",
   "similar_questions": ["cancellable-interval"],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/cycle/metadata.json b/packages/questions/javascript/cycle/metadata.json
index 73ab80d9e..cb66c8925 100644
--- a/packages/questions/javascript/cycle/metadata.json
+++ b/packages/questions/javascript/cycle/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "easy",
   "similar_questions": [],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["closure"]
 }
diff --git a/packages/questions/javascript/debounce-ii/metadata.json b/packages/questions/javascript/debounce-ii/metadata.json
index 264098162..67ec46477 100644
--- a/packages/questions/javascript/debounce-ii/metadata.json
+++ b/packages/questions/javascript/debounce-ii/metadata.json
@@ -11,5 +11,6 @@
   "difficulty": "medium",
   "featured": false,
   "similar_questions": ["debounce", "throttle"],
-  "next_questions": ["throttle"]
+  "next_questions": ["throttle"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/debounce/metadata.json b/packages/questions/javascript/debounce/metadata.json
index 53e6d1a2f..d610d40ee 100644
--- a/packages/questions/javascript/debounce/metadata.json
+++ b/packages/questions/javascript/debounce/metadata.json
@@ -11,5 +11,6 @@
   "difficulty": "medium",
   "featured": true,
   "similar_questions": ["throttle"],
-  "next_questions": ["throttle", "debounce-ii", "holy-grail"]
+  "next_questions": ["throttle", "debounce-ii", "holy-grail"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/deep-clone-ii/metadata.json b/packages/questions/javascript/deep-clone-ii/metadata.json
index 5ba174eb1..7fe87846b 100644
--- a/packages/questions/javascript/deep-clone-ii/metadata.json
+++ b/packages/questions/javascript/deep-clone-ii/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "medium",
   "difficulty": "hard",
-  "similar_questions": ["deep-clone"]
+  "similar_questions": ["deep-clone"],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/deep-clone/metadata.json b/packages/questions/javascript/deep-clone/metadata.json
index bfad22b80..666370775 100644
--- a/packages/questions/javascript/deep-clone/metadata.json
+++ b/packages/questions/javascript/deep-clone/metadata.json
@@ -10,5 +10,6 @@
   "importance": "high",
   "difficulty": "medium",
   "similar_questions": ["deep-equal", "deep-clone-ii"],
-  "next_questions": ["todo-list", "deep-equal", "deep-clone-ii"]
+  "next_questions": ["todo-list", "deep-equal", "deep-clone-ii"],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/deep-equal/metadata.json b/packages/questions/javascript/deep-equal/metadata.json
index c8d8c1911..153c908c9 100644
--- a/packages/questions/javascript/deep-equal/metadata.json
+++ b/packages/questions/javascript/deep-equal/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "medium",
   "difficulty": "medium",
-  "similar_questions": ["deep-clone", "deep-clone-ii"]
+  "similar_questions": ["deep-clone", "deep-clone-ii"],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/deep-map/metadata.json b/packages/questions/javascript/deep-map/metadata.json
index 1db17009a..ad01ffdfc 100644
--- a/packages/questions/javascript/deep-map/metadata.json
+++ b/packages/questions/javascript/deep-map/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": ["array-map", "object-map"],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/deep-merge/metadata.json b/packages/questions/javascript/deep-merge/metadata.json
index 3bcd817a9..7a27b334c 100644
--- a/packages/questions/javascript/deep-merge/metadata.json
+++ b/packages/questions/javascript/deep-merge/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": ["deep-clone"],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/deep-omit/metadata.json b/packages/questions/javascript/deep-omit/metadata.json
index 1bc6fd9d2..9d4340fca 100644
--- a/packages/questions/javascript/deep-omit/metadata.json
+++ b/packages/questions/javascript/deep-omit/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": ["deep-map"],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/event-emitter-ii/metadata.json b/packages/questions/javascript/event-emitter-ii/metadata.json
index 8112a3659..22bb03d75 100644
--- a/packages/questions/javascript/event-emitter-ii/metadata.json
+++ b/packages/questions/javascript/event-emitter-ii/metadata.json
@@ -9,5 +9,6 @@
   "importance": "medium",
   "difficulty": "medium",
   "similar_questions": ["event-emitter", "jquery-class-manipulation"],
-  "next_questions": ["jquery-class-manipulation", "backbone-model"]
+  "next_questions": ["jquery-class-manipulation", "backbone-model"],
+  "topics": ["oop"]
 }
diff --git a/packages/questions/javascript/event-emitter/metadata.json b/packages/questions/javascript/event-emitter/metadata.json
index 30b8b5c57..a396c1854 100644
--- a/packages/questions/javascript/event-emitter/metadata.json
+++ b/packages/questions/javascript/event-emitter/metadata.json
@@ -9,5 +9,6 @@
   "importance": "medium",
   "difficulty": "medium",
   "similar_questions": ["event-emitter-ii", "jquery-class-manipulation"],
-  "next_questions": ["event-emitter-ii"]
+  "next_questions": ["event-emitter-ii"],
+  "topics": ["oop"]
 }
diff --git a/packages/questions/javascript/flatten/metadata.json b/packages/questions/javascript/flatten/metadata.json
index 84d3f84a5..fc8185c88 100644
--- a/packages/questions/javascript/flatten/metadata.json
+++ b/packages/questions/javascript/flatten/metadata.json
@@ -11,5 +11,6 @@
   "featured": true,
   "difficulty": "medium",
   "similar_questions": ["squash-object", "get"],
-  "next_questions": ["todo-list", "holy-grail", "deep-equal"]
+  "next_questions": ["todo-list", "holy-grail", "deep-equal"],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/get-elements-by-class-name/metadata.json b/packages/questions/javascript/get-elements-by-class-name/metadata.json
index d9d12b457..277be2889 100644
--- a/packages/questions/javascript/get-elements-by-class-name/metadata.json
+++ b/packages/questions/javascript/get-elements-by-class-name/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "medium",
   "difficulty": "medium",
-  "similar_questions": ["get-elements-by-tag-name", "get-elements-by-style"]
+  "similar_questions": ["get-elements-by-tag-name", "get-elements-by-style"],
+  "topics": ["web-api"]
 }
diff --git a/packages/questions/javascript/get-elements-by-style/metadata.json b/packages/questions/javascript/get-elements-by-style/metadata.json
index 7f89f8ada..f6873513d 100644
--- a/packages/questions/javascript/get-elements-by-style/metadata.json
+++ b/packages/questions/javascript/get-elements-by-style/metadata.json
@@ -12,5 +12,6 @@
   "similar_questions": [
     "get-elements-by-tag-name",
     "get-elements-by-class-name"
-  ]
+  ],
+  "topics": ["web-api"]
 }
diff --git a/packages/questions/javascript/get-elements-by-tag-name-hierarchy/metadata.json b/packages/questions/javascript/get-elements-by-tag-name-hierarchy/metadata.json
index fc44a12ba..b1db55516 100644
--- a/packages/questions/javascript/get-elements-by-tag-name-hierarchy/metadata.json
+++ b/packages/questions/javascript/get-elements-by-tag-name-hierarchy/metadata.json
@@ -14,5 +14,6 @@
     "get-elements-by-class-name",
     "get-elements-by-style",
     "get-elements-by-tag-name"
-  ]
+  ],
+  "topics": ["web-api"]
 }
diff --git a/packages/questions/javascript/get-elements-by-tag-name/metadata.json b/packages/questions/javascript/get-elements-by-tag-name/metadata.json
index 53da3f5b3..d2af4c467 100644
--- a/packages/questions/javascript/get-elements-by-tag-name/metadata.json
+++ b/packages/questions/javascript/get-elements-by-tag-name/metadata.json
@@ -10,5 +10,6 @@
   "importance": "low",
   "difficulty": "medium",
   "featured": true,
-  "similar_questions": ["get-elements-by-class-name", "get-elements-by-style"]
+  "similar_questions": ["get-elements-by-class-name", "get-elements-by-style"],
+  "topics": ["web-api"]
 }
diff --git a/packages/questions/javascript/get/metadata.json b/packages/questions/javascript/get/metadata.json
index 6ed4500c8..9e0aed744 100644
--- a/packages/questions/javascript/get/metadata.json
+++ b/packages/questions/javascript/get/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "low",
   "difficulty": "easy",
-  "similar_questions": ["squash-object"]
+  "similar_questions": ["squash-object"],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/html-serializer/metadata.json b/packages/questions/javascript/html-serializer/metadata.json
index 0d55c0dbc..01d09a624 100644
--- a/packages/questions/javascript/html-serializer/metadata.json
+++ b/packages/questions/javascript/html-serializer/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "low",
   "difficulty": "medium",
-  "similar_questions": ["json-stringify"]
+  "similar_questions": ["json-stringify"],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/identical-dom-trees/metadata.json b/packages/questions/javascript/identical-dom-trees/metadata.json
index 160b74ae2..38b01d685 100644
--- a/packages/questions/javascript/identical-dom-trees/metadata.json
+++ b/packages/questions/javascript/identical-dom-trees/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "low",
   "difficulty": "medium",
-  "similar_questions": ["deep-equal"]
+  "similar_questions": ["deep-equal"],
+  "topics": ["recursion", "tree", "web-api"]
 }
diff --git a/packages/questions/javascript/jquery-class-manipulation/metadata.json b/packages/questions/javascript/jquery-class-manipulation/metadata.json
index dc137b9a5..33a6d7723 100644
--- a/packages/questions/javascript/jquery-class-manipulation/metadata.json
+++ b/packages/questions/javascript/jquery-class-manipulation/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "low",
   "difficulty": "medium",
-  "similar_questions": ["jquery-css"]
+  "similar_questions": ["jquery-css"],
+  "topics": ["oop", "web-api"]
 }
diff --git a/packages/questions/javascript/jquery-css/metadata.json b/packages/questions/javascript/jquery-css/metadata.json
index 80dfe822c..a3313fea8 100644
--- a/packages/questions/javascript/jquery-css/metadata.json
+++ b/packages/questions/javascript/jquery-css/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "medium",
   "difficulty": "easy",
-  "similar_questions": ["jquery-class-manipulation"]
+  "similar_questions": ["jquery-class-manipulation"],
+  "topics": ["oop", "web-api"]
 }
diff --git a/packages/questions/javascript/json-stringify-ii/metadata.json b/packages/questions/javascript/json-stringify-ii/metadata.json
index 58bb1eaf3..fca7f2d38 100644
--- a/packages/questions/javascript/json-stringify-ii/metadata.json
+++ b/packages/questions/javascript/json-stringify-ii/metadata.json
@@ -10,5 +10,6 @@
   "importance": "low",
   "difficulty": "hard",
   "featured": true,
-  "similar_questions": ["html-serializer"]
+  "similar_questions": ["html-serializer"],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/json-stringify/metadata.json b/packages/questions/javascript/json-stringify/metadata.json
index a4a98aa99..19b231007 100644
--- a/packages/questions/javascript/json-stringify/metadata.json
+++ b/packages/questions/javascript/json-stringify/metadata.json
@@ -10,5 +10,6 @@
   "difficulty": "medium",
   "featured": true,
   "similar_questions": ["html-serializer"],
-  "next_questions": ["json-stringify-ii"]
+  "next_questions": ["json-stringify-ii"],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/make-counter-ii/metadata.json b/packages/questions/javascript/make-counter-ii/metadata.json
index a246608fe..f6937293e 100644
--- a/packages/questions/javascript/make-counter-ii/metadata.json
+++ b/packages/questions/javascript/make-counter-ii/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": ["make-counter", "jquery-css"],
-  "next_questions": ["jquery-css"]
+  "next_questions": ["jquery-css"],
+  "topics": ["closure"]
 }
diff --git a/packages/questions/javascript/make-counter/metadata.json b/packages/questions/javascript/make-counter/metadata.json
index e119c9cc8..dddf46f6b 100644
--- a/packages/questions/javascript/make-counter/metadata.json
+++ b/packages/questions/javascript/make-counter/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "easy",
   "similar_questions": ["counter"],
-  "next_questions": ["make-counter-ii"]
+  "next_questions": ["make-counter-ii"],
+  "topics": ["closure"]
 }
diff --git a/packages/questions/javascript/map-async-limit/metadata.json b/packages/questions/javascript/map-async-limit/metadata.json
index 9c207cbbc..505c1efe8 100644
--- a/packages/questions/javascript/map-async-limit/metadata.json
+++ b/packages/questions/javascript/map-async-limit/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": ["promise-all"],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/map-async/metadata.json b/packages/questions/javascript/map-async/metadata.json
index 6cec1a6d8..5ac200688 100644
--- a/packages/questions/javascript/map-async/metadata.json
+++ b/packages/questions/javascript/map-async/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": ["promise-all"],
-  "next_questions": ["map-async-limit"]
+  "next_questions": ["map-async-limit"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/once/metadata.json b/packages/questions/javascript/once/metadata.json
index 2f3435bfd..3699e5eef 100644
--- a/packages/questions/javascript/once/metadata.json
+++ b/packages/questions/javascript/once/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "low",
   "difficulty": "easy",
-  "next_questions": ["limit"]
+  "next_questions": ["limit"],
+  "topics": ["closure"]
 }
diff --git a/packages/questions/javascript/promise-all-settled/metadata.json b/packages/questions/javascript/promise-all-settled/metadata.json
index ae96abbd0..883bfd240 100644
--- a/packages/questions/javascript/promise-all-settled/metadata.json
+++ b/packages/questions/javascript/promise-all-settled/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "medium",
   "difficulty": "medium",
-  "similar_questions": ["promise-all", "promise-any", "promise-race"]
+  "similar_questions": ["promise-all", "promise-any", "promise-race"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/promise-all/metadata.json b/packages/questions/javascript/promise-all/metadata.json
index 52839362c..fd5eb3a64 100644
--- a/packages/questions/javascript/promise-all/metadata.json
+++ b/packages/questions/javascript/promise-all/metadata.json
@@ -11,5 +11,6 @@
   "difficulty": "medium",
   "featured": true,
   "similar_questions": ["promise-all-settled", "promise-any", "promise-race"],
-  "next_questions": ["flatten", "promise-any", "todo-list"]
+  "next_questions": ["flatten", "promise-any", "todo-list"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/promise-any/metadata.json b/packages/questions/javascript/promise-any/metadata.json
index 34877b59c..09e4ada63 100644
--- a/packages/questions/javascript/promise-any/metadata.json
+++ b/packages/questions/javascript/promise-any/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "low",
   "difficulty": "medium",
-  "similar_questions": ["promise-all", "promise-all-settled", "promise-race"]
+  "similar_questions": ["promise-all", "promise-all-settled", "promise-race"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/promise-merge/metadata.json b/packages/questions/javascript/promise-merge/metadata.json
index ba508ae38..50dab3c00 100644
--- a/packages/questions/javascript/promise-merge/metadata.json
+++ b/packages/questions/javascript/promise-merge/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": ["promise-all", "promise-all-settled"],
-  "next_questions": ["promise-all"]
+  "next_questions": ["promise-all"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/promise-race/metadata.json b/packages/questions/javascript/promise-race/metadata.json
index f018c61c4..1ca0048cd 100644
--- a/packages/questions/javascript/promise-race/metadata.json
+++ b/packages/questions/javascript/promise-race/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "medium",
   "difficulty": "easy",
-  "similar_questions": ["promise-all", "promise-all-settled", "promise-any"]
+  "similar_questions": ["promise-all", "promise-all-settled", "promise-any"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/promise-reject/metadata.json b/packages/questions/javascript/promise-reject/metadata.json
index d1852adf1..c19fd3191 100644
--- a/packages/questions/javascript/promise-reject/metadata.json
+++ b/packages/questions/javascript/promise-reject/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "easy",
   "similar_questions": ["promise-resolve"],
-  "next_questions": ["promise-with-resolvers"]
+  "next_questions": ["promise-with-resolvers"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/promise-resolve/metadata.json b/packages/questions/javascript/promise-resolve/metadata.json
index 7272f4def..16a45cfa1 100644
--- a/packages/questions/javascript/promise-resolve/metadata.json
+++ b/packages/questions/javascript/promise-resolve/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": ["promise-reject"],
-  "next_questions": ["promise-with-resolvers"]
+  "next_questions": ["promise-with-resolvers"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/promise-timeout/metadata.json b/packages/questions/javascript/promise-timeout/metadata.json
index 59bb87dcd..a95aa1e0e 100644
--- a/packages/questions/javascript/promise-timeout/metadata.json
+++ b/packages/questions/javascript/promise-timeout/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": [],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/promise-with-resolvers/metadata.json b/packages/questions/javascript/promise-with-resolvers/metadata.json
index a479d0fb0..10dd2e5c2 100644
--- a/packages/questions/javascript/promise-with-resolvers/metadata.json
+++ b/packages/questions/javascript/promise-with-resolvers/metadata.json
@@ -10,5 +10,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": ["promise-resolve", "promise-reject"],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/promisify-ii/metadata.json b/packages/questions/javascript/promisify-ii/metadata.json
index fda2999a3..bd02716ba 100644
--- a/packages/questions/javascript/promisify-ii/metadata.json
+++ b/packages/questions/javascript/promisify-ii/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": [],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/promisify/metadata.json b/packages/questions/javascript/promisify/metadata.json
index 413929dd8..2d5c607dc 100644
--- a/packages/questions/javascript/promisify/metadata.json
+++ b/packages/questions/javascript/promisify/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": [],
-  "next_questions": ["promisify-ii"]
+  "next_questions": ["promisify-ii"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/resumable-interval/metadata.json b/packages/questions/javascript/resumable-interval/metadata.json
index a47b5c1a7..e8455dfe1 100644
--- a/packages/questions/javascript/resumable-interval/metadata.json
+++ b/packages/questions/javascript/resumable-interval/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": ["resumable-timeout"],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["async", "closure"]
 }
diff --git a/packages/questions/javascript/sleep/metadata.json b/packages/questions/javascript/sleep/metadata.json
index af5c13f49..d7a685a5a 100644
--- a/packages/questions/javascript/sleep/metadata.json
+++ b/packages/questions/javascript/sleep/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "easy",
   "similar_questions": [],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/squash-object/metadata.json b/packages/questions/javascript/squash-object/metadata.json
index b9d2fb5c9..347bfcda0 100644
--- a/packages/questions/javascript/squash-object/metadata.json
+++ b/packages/questions/javascript/squash-object/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "low",
   "difficulty": "medium",
-  "similar_questions": ["flatten", "get"]
+  "similar_questions": ["flatten", "get"],
+  "topics": ["recursion"]
 }
diff --git a/packages/questions/javascript/sum/metadata.json b/packages/questions/javascript/sum/metadata.json
index 0f3b59108..4698d3f1c 100644
--- a/packages/questions/javascript/sum/metadata.json
+++ b/packages/questions/javascript/sum/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "low",
   "difficulty": "easy",
-  "similar_questions": ["curry", "curry-ii"]
+  "similar_questions": ["curry", "curry-ii"],
+  "topics": ["closure"]
 }
diff --git a/packages/questions/javascript/table-of-contents/metadata.json b/packages/questions/javascript/table-of-contents/metadata.json
index 9a8483c50..dbc4d613d 100644
--- a/packages/questions/javascript/table-of-contents/metadata.json
+++ b/packages/questions/javascript/table-of-contents/metadata.json
@@ -8,5 +8,6 @@
   "duration": 30,
   "published": true,
   "importance": "medium",
-  "difficulty": "hard"
+  "difficulty": "hard",
+  "topics": ["recursion", "tree", "web-api"]
 }
diff --git a/packages/questions/javascript/throttle/metadata.json b/packages/questions/javascript/throttle/metadata.json
index c782c4645..c25f8cdec 100644
--- a/packages/questions/javascript/throttle/metadata.json
+++ b/packages/questions/javascript/throttle/metadata.json
@@ -9,5 +9,6 @@
   "published": true,
   "importance": "high",
   "difficulty": "medium",
-  "similar_questions": ["debounce"]
+  "similar_questions": ["debounce"],
+  "topics": ["async"]
 }
diff --git a/packages/questions/javascript/turtle/metadata.json b/packages/questions/javascript/turtle/metadata.json
index 2bed7bfb4..e93186d16 100644
--- a/packages/questions/javascript/turtle/metadata.json
+++ b/packages/questions/javascript/turtle/metadata.json
@@ -9,5 +9,6 @@
   "importance": "low",
   "difficulty": "medium",
   "similar_questions": [],
-  "next_questions": []
+  "next_questions": [],
+  "topics": ["oop"]
 }
diff --git a/packages/questions/user-interface/accordion-ii/index.mdx b/packages/questions/user-interface/accordion-ii/index.mdx
index 637d90fea..4a7340e8e 100644
--- a/packages/questions/user-interface/accordion-ii/index.mdx
+++ b/packages/questions/user-interface/accordion-ii/index.mdx
@@ -15,6 +15,7 @@ frameworks: [react, vanilla]
 framework_default: react
 next_questions:
   - accordion-iii
+topics: [a11y]
 ---
 
 **Note:** This is an advanced version of [Accordion](/questions/user-interface/accordion), you should complete that question first before attempting this question.
diff --git a/packages/questions/user-interface/accordion-iii/index.mdx b/packages/questions/user-interface/accordion-iii/index.mdx
index a5558a609..9cca2b86b 100644
--- a/packages/questions/user-interface/accordion-iii/index.mdx
+++ b/packages/questions/user-interface/accordion-iii/index.mdx
@@ -12,6 +12,7 @@ published: true
 importance: low
 difficulty: medium
 frameworks: [react]
+topics: [a11y]
 ---
 
 **Note:** This is an advanced version of [Accordion II](/questions/user-interface/accordion-ii), you should complete that question first before attempting this question. This question is not available in Vanilla JavaScript as it will require a fair bit of code to add keyboard interactions without a JavaScript framework.
diff --git a/packages/questions/user-interface/accordion/index.mdx b/packages/questions/user-interface/accordion/index.mdx
index c0ffce678..93d5a8357 100644
--- a/packages/questions/user-interface/accordion/index.mdx
+++ b/packages/questions/user-interface/accordion/index.mdx
@@ -6,7 +6,7 @@ excerpt: Build an accordion component that a displays a list of vertically stack
 created: 2022-12-21
 languages: [html, css, js]
 companies: []
-access: free
+access: premium
 duration: 15
 published: true
 importance: low
@@ -15,6 +15,7 @@ frameworks: [react, vanilla]
 framework_default: react
 next_questions:
   - accordion-ii
+topics: [a11y]
 ---
 
 Build an Accordion component that displays a list of vertically stacked sections that each contain a title and content snippet. Some HTML is provided for you as example contents along with a chevron icon.
diff --git a/packages/questions/user-interface/analog-clock/index.mdx b/packages/questions/user-interface/analog-clock/index.mdx
index 1fcc163a2..6b016b2f4 100644
--- a/packages/questions/user-interface/analog-clock/index.mdx
+++ b/packages/questions/user-interface/analog-clock/index.mdx
@@ -14,6 +14,7 @@ difficulty: medium
 frameworks: [react, vanilla, angular, vue, svelte]
 similar_questions:
   - digital-clock
+topics: [a11y, async]
 ---
 
 Create a widget that renders the current time within an analog clock display, where the clock hands move and update like a real clock.
diff --git a/packages/questions/user-interface/auth-code-input/index.mdx b/packages/questions/user-interface/auth-code-input/index.mdx
index 5ef4e1b24..69c13572c 100644
--- a/packages/questions/user-interface/auth-code-input/index.mdx
+++ b/packages/questions/user-interface/auth-code-input/index.mdx
@@ -11,6 +11,7 @@ published: true
 importance: low
 difficulty: hard
 frameworks: [react]
+topics: [a11y]
 ---
 
 Build an auth code input component that allows users to enter a 6-digit authorization code and submit it.
diff --git a/packages/questions/user-interface/birth-year-histogram/frameworks/react/skeleton/setup/src/index.js b/packages/questions/user-interface/birth-year-histogram/frameworks/react/skeleton/setup/src/index.js
index f8f23f1b6..9a6af3ac8 100644
--- a/packages/questions/user-interface/birth-year-histogram/frameworks/react/skeleton/setup/src/index.js
+++ b/packages/questions/user-interface/birth-year-histogram/frameworks/react/skeleton/setup/src/index.js
@@ -3,6 +3,8 @@ import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
+import './styles.css';
+
 const root = createRoot(document.getElementById('root'));
 root.render(
   <StrictMode>
diff --git a/packages/questions/user-interface/contact-form/index.mdx b/packages/questions/user-interface/contact-form/index.mdx
index d34de0b0a..5c9cb965d 100644
--- a/packages/questions/user-interface/contact-form/index.mdx
+++ b/packages/questions/user-interface/contact-form/index.mdx
@@ -18,6 +18,7 @@ similar_questions:
 next_questions:
   - flatten
   - signup-form
+topics: [a11y]
 ---
 
 Building forms is a common task in Front End. In this exercise, we will build a basic "Contact Us" form, commonly seen on marketing websites for visitors to ask questions or provide feedback.
diff --git a/packages/questions/user-interface/data-table-iv/frameworks/react/solution/setup/src/App.tsx b/packages/questions/user-interface/data-table-iv/frameworks/react/solution/setup/src/App.tsx
index 5f8d49a78..95254e63f 100644
--- a/packages/questions/user-interface/data-table-iv/frameworks/react/solution/setup/src/App.tsx
+++ b/packages/questions/user-interface/data-table-iv/frameworks/react/solution/setup/src/App.tsx
@@ -40,7 +40,8 @@ const userColumns: Columns<User> = [
       a: User,
       b: User,
       direction: SortDirection,
-    ) => (direction === 'asc' ? a.id - b.id : b.id - a.id),
+    ) =>
+      direction === 'asc' ? a.age - b.age : b.age - a.age,
     filterType: 'range',
   },
   {
diff --git a/packages/questions/user-interface/dice-roller/index.mdx b/packages/questions/user-interface/dice-roller/index.mdx
index 9b1ca76ed..fa6fab6b9 100644
--- a/packages/questions/user-interface/dice-roller/index.mdx
+++ b/packages/questions/user-interface/dice-roller/index.mdx
@@ -11,6 +11,7 @@ published: true
 importance: low
 difficulty: medium
 frameworks: [react, angular, vue, svelte]
+topics: [a11y]
 ---
 
 Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.
diff --git a/packages/questions/user-interface/digital-clock/index.mdx b/packages/questions/user-interface/digital-clock/index.mdx
index 782e077de..87c449fbf 100644
--- a/packages/questions/user-interface/digital-clock/index.mdx
+++ b/packages/questions/user-interface/digital-clock/index.mdx
@@ -13,6 +13,7 @@ importance: medium
 difficulty: medium
 featured: true
 frameworks: [react, vanilla, angular, vue, svelte]
+topics: [a11y, async]
 ---
 
 Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display.
diff --git a/packages/questions/user-interface/file-explorer-iii/index.mdx b/packages/questions/user-interface/file-explorer-iii/index.mdx
index 56321057e..90a3bf76a 100644
--- a/packages/questions/user-interface/file-explorer-iii/index.mdx
+++ b/packages/questions/user-interface/file-explorer-iii/index.mdx
@@ -12,7 +12,7 @@ published: true
 importance: medium
 difficulty: medium
 frameworks: [react]
-next_questions: [file-explorer-iii]
+next_questions: [nested-checkboxes]
 ---
 
 **Note:** This is a follow up to the [File Explorer](/questions/user-interface/file-explorer) question, you should complete that question first before attempting this question.
@@ -22,7 +22,7 @@ In [File Explorer](/questions/user-interface/file-explorer), we built a function
 The other possible structure is having a single flat list of items and add the right amount of padding for descendant items. While recursing, the current level will need to be passed as an argument so that the descendant items know what how much padding to render.
 
 ```html
-<!-- The bullets will have to be hidden as
+<!-- The bullets will have to be hidden as 
  they will still be flushed to the left. -->
 <ul>
   <li>docs</li>
diff --git a/packages/questions/user-interface/file-explorer/index.mdx b/packages/questions/user-interface/file-explorer/index.mdx
index b110269e4..e01dedcbc 100644
--- a/packages/questions/user-interface/file-explorer/index.mdx
+++ b/packages/questions/user-interface/file-explorer/index.mdx
@@ -17,6 +17,7 @@ next_questions:
   - file-explorer-iii
 similar_questions:
   - nested-checkboxes
+topics: [a11y]
 ---
 
 Given an array of file objects, build a component that displays them in a hierarchical tree format.
@@ -24,7 +25,7 @@ Given an array of file objects, build a component that displays them in a hierar
 There are two types of objects – files and directories:
 
 1. Files are essentially leaf nodes of the tree, they do not have children.
-1. Directories can contain other objects – either files or directories.
+2. Directories can contain other objects – either files or directories.
 
 You may assume that the IDs and names within the same directory are unique.
 
diff --git a/packages/questions/user-interface/flight-booker/index.mdx b/packages/questions/user-interface/flight-booker/index.mdx
index d90f1393e..93be91dcb 100644
--- a/packages/questions/user-interface/flight-booker/index.mdx
+++ b/packages/questions/user-interface/flight-booker/index.mdx
@@ -11,7 +11,8 @@ duration: 15
 published: true
 importance: low
 difficulty: easy
-frameworks: [react, angular, vue, svelte]
+frameworks: [react, vanilla, angular, vue, svelte]
+topics: [a11y]
 ---
 
 Build a component that books a one-way or return flight for specified dates.
diff --git a/packages/questions/user-interface/grid-lights/index.mdx b/packages/questions/user-interface/grid-lights/index.mdx
index 6841d87c7..a8bcadd12 100644
--- a/packages/questions/user-interface/grid-lights/index.mdx
+++ b/packages/questions/user-interface/grid-lights/index.mdx
@@ -12,6 +12,7 @@ published: true
 importance: low
 difficulty: medium
 frameworks: [react, angular, vue, svelte]
+topics: [a11y, async]
 ---
 
 Build a 3x3 grid of light cells (omitting the center cell) where you can click on the cells to activate them, turning them green. When all the cells have been activated, they will be deactivated one by one in the reverse order they were activated with a 300ms interval in between.
diff --git a/packages/questions/user-interface/image-carousel-ii/a11y.mdx b/packages/questions/user-interface/image-carousel-ii/a11y.mdx
index b5ccc1946..5218bf7c6 100644
--- a/packages/questions/user-interface/image-carousel-ii/a11y.mdx
+++ b/packages/questions/user-interface/image-carousel-ii/a11y.mdx
@@ -1,4 +1,4 @@
-## Accessibility (A11y)
+## Accessibility
 
 - All images should have `alt` text that describes the image to support accessibility. It will be read out loud by screen readers and is also used by search engines.
 - Add appropriate `aria-label`s to the buttons since the buttons do not have visible labels.
diff --git a/packages/questions/user-interface/image-carousel-ii/index.mdx b/packages/questions/user-interface/image-carousel-ii/index.mdx
index de579d67c..2d81ee834 100644
--- a/packages/questions/user-interface/image-carousel-ii/index.mdx
+++ b/packages/questions/user-interface/image-carousel-ii/index.mdx
@@ -23,6 +23,7 @@ difficulty: medium
 frameworks: [react]
 next_questions:
   - image-carousel-iii
+topics: [a11y]
 ---
 
 **Note:** This is a follow up to the [Image Carousel](/questions/user-interface/image-carousel) question, you should complete that question first before attempting this question.
diff --git a/packages/questions/user-interface/image-carousel-iii/a11y.mdx b/packages/questions/user-interface/image-carousel-iii/a11y.mdx
index b5ccc1946..5218bf7c6 100644
--- a/packages/questions/user-interface/image-carousel-iii/a11y.mdx
+++ b/packages/questions/user-interface/image-carousel-iii/a11y.mdx
@@ -1,4 +1,4 @@
-## Accessibility (A11y)
+## Accessibility
 
 - All images should have `alt` text that describes the image to support accessibility. It will be read out loud by screen readers and is also used by search engines.
 - Add appropriate `aria-label`s to the buttons since the buttons do not have visible labels.
diff --git a/packages/questions/user-interface/image-carousel/a11y.mdx b/packages/questions/user-interface/image-carousel/a11y.mdx
index b5ccc1946..5218bf7c6 100644
--- a/packages/questions/user-interface/image-carousel/a11y.mdx
+++ b/packages/questions/user-interface/image-carousel/a11y.mdx
@@ -1,4 +1,4 @@
-## Accessibility (A11y)
+## Accessibility
 
 - All images should have `alt` text that describes the image to support accessibility. It will be read out loud by screen readers and is also used by search engines.
 - Add appropriate `aria-label`s to the buttons since the buttons do not have visible labels.
diff --git a/packages/questions/user-interface/image-carousel/index.mdx b/packages/questions/user-interface/image-carousel/index.mdx
index 5d2984f7a..9dce67f2c 100644
--- a/packages/questions/user-interface/image-carousel/index.mdx
+++ b/packages/questions/user-interface/image-carousel/index.mdx
@@ -24,6 +24,7 @@ frameworks: [react]
 next_questions:
   - image-carousel-ii
   - image-carousel-iii
+topics: [a11y]
 ---
 
 Build an image carousel that displays a sequence of images.
diff --git a/packages/questions/user-interface/job-board/index.mdx b/packages/questions/user-interface/job-board/index.mdx
index fe397fc93..f77e70271 100644
--- a/packages/questions/user-interface/job-board/index.mdx
+++ b/packages/questions/user-interface/job-board/index.mdx
@@ -12,6 +12,7 @@ published: true
 importance: low
 difficulty: medium
 frameworks: [react, vanilla, angular, vue, svelte]
+topics: [networking]
 ---
 
 Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.
diff --git a/packages/questions/user-interface/like-button/index.mdx b/packages/questions/user-interface/like-button/index.mdx
index 4bd11a618..97a9eb2ce 100644
--- a/packages/questions/user-interface/like-button/index.mdx
+++ b/packages/questions/user-interface/like-button/index.mdx
@@ -13,6 +13,7 @@ importance: low
 difficulty: medium
 featured: true
 frameworks: [react, vanilla, angular, svelte]
+topics: [async, networking]
 ---
 
 Create a Like button which appearance changes based on the following states:
diff --git a/packages/questions/user-interface/modal-dialog-ii/index.mdx b/packages/questions/user-interface/modal-dialog-ii/index.mdx
index c9289fdc3..b77a66b37 100644
--- a/packages/questions/user-interface/modal-dialog-ii/index.mdx
+++ b/packages/questions/user-interface/modal-dialog-ii/index.mdx
@@ -14,6 +14,7 @@ difficulty: medium
 frameworks: [react]
 next_questions:
   - modal-dialog-iii
+topics: [a11y]
 ---
 
 **Note:** This is an advanced version of [Modal Dialog](/questions/user-interface/modal-dialog), you should complete that question first before attempting this question.
diff --git a/packages/questions/user-interface/modal-dialog-iii/index.mdx b/packages/questions/user-interface/modal-dialog-iii/index.mdx
index c2d88d28b..65cf4af44 100644
--- a/packages/questions/user-interface/modal-dialog-iii/index.mdx
+++ b/packages/questions/user-interface/modal-dialog-iii/index.mdx
@@ -14,6 +14,7 @@ difficulty: medium
 frameworks: [react]
 next_questions:
   - modal-dialog-iv
+topics: [a11y]
 ---
 
 **Note:** This is an advanced version of [Modal Dialog II](/questions/user-interface/modal-dialog-ii), you should complete that question first before attempting this question.
diff --git a/packages/questions/user-interface/modal-dialog-iv/index.mdx b/packages/questions/user-interface/modal-dialog-iv/index.mdx
index e9e054b48..b057c920e 100644
--- a/packages/questions/user-interface/modal-dialog-iv/index.mdx
+++ b/packages/questions/user-interface/modal-dialog-iv/index.mdx
@@ -12,6 +12,7 @@ published: true
 importance: low
 difficulty: hard
 frameworks: [react]
+topics: [a11y]
 ---
 
 **Note:** This is an advanced version of [Modal Dialog III](/questions/user-interface/modal-dialog-iii), you should complete that question first before attempting this question.
diff --git a/packages/questions/user-interface/modal-dialog/a11y.mdx b/packages/questions/user-interface/modal-dialog/a11y.mdx
index fc8db1406..4df463c6a 100644
--- a/packages/questions/user-interface/modal-dialog/a11y.mdx
+++ b/packages/questions/user-interface/modal-dialog/a11y.mdx
@@ -1,4 +1,4 @@
-## Accessibility (A11y)
+## Accessibility
 
 There are a lot of a11y considerations for modal dialogs, possibly too many to implement during interviews.
 
diff --git a/packages/questions/user-interface/modal-dialog/index.mdx b/packages/questions/user-interface/modal-dialog/index.mdx
index fead70026..5e8064c8d 100644
--- a/packages/questions/user-interface/modal-dialog/index.mdx
+++ b/packages/questions/user-interface/modal-dialog/index.mdx
@@ -14,6 +14,7 @@ difficulty: medium
 frameworks: [react]
 next_questions:
   - modal-dialog-ii
+topics: [a11y]
 ---
 
 Modal dialogs are interactive overlay windows that temporarily disable the main content of a web page, focusing user attention on specific tasks or information. They serve various purposes, including displaying critical alerts, requesting user input, confirming actions, and presenting additional content without navigating away from the current context.
diff --git a/packages/questions/user-interface/pixel-art/index.mdx b/packages/questions/user-interface/pixel-art/index.mdx
index 12681b329..5c14cade5 100644
--- a/packages/questions/user-interface/pixel-art/index.mdx
+++ b/packages/questions/user-interface/pixel-art/index.mdx
@@ -12,6 +12,7 @@ published: true
 importance: low
 difficulty: medium
 frameworks: [react, angular, vue, svelte]
+topics: [a11y]
 ---
 
 Build a pixel art drawing tool where users can paint pixels with selected colors and also erase colored pixels.
diff --git a/packages/questions/user-interface/progress-bars-ii/index.mdx b/packages/questions/user-interface/progress-bars-ii/index.mdx
index 09feb774b..eb109ae1e 100644
--- a/packages/questions/user-interface/progress-bars-ii/index.mdx
+++ b/packages/questions/user-interface/progress-bars-ii/index.mdx
@@ -14,6 +14,7 @@ difficulty: medium
 frameworks: [react]
 next_questions:
   - progress-bars-iii
+topics: [async]
 ---
 
 **Note:** This is an advanced version of [Progress Bars](/questions/user-interface/progress-bars), you should complete that question first before attempting this question.
diff --git a/packages/questions/user-interface/progress-bars-iii/index.mdx b/packages/questions/user-interface/progress-bars-iii/index.mdx
index 0e784e1b0..defb74312 100644
--- a/packages/questions/user-interface/progress-bars-iii/index.mdx
+++ b/packages/questions/user-interface/progress-bars-iii/index.mdx
@@ -14,6 +14,7 @@ difficulty: medium
 frameworks: [react]
 next_questions:
   - progress-bars-iv
+topics: [async]
 ---
 
 **Note:** This is an advanced version of [Progress Bars II](/questions/user-interface/progress-bars-ii), you should complete that question first before attempting this question.
diff --git a/packages/questions/user-interface/progress-bars-iv/index.mdx b/packages/questions/user-interface/progress-bars-iv/index.mdx
index 79432e532..18bf9cc6f 100644
--- a/packages/questions/user-interface/progress-bars-iv/index.mdx
+++ b/packages/questions/user-interface/progress-bars-iv/index.mdx
@@ -12,6 +12,7 @@ published: true
 importance: low
 difficulty: hard
 frameworks: [react]
+topics: [async]
 ---
 
 **Note:** This is an advanced version of [Progress Bars III](/questions/user-interface/progress-bars-iii), you should complete that question first before attempting this question.
diff --git a/packages/questions/user-interface/progress-bars/index.mdx b/packages/questions/user-interface/progress-bars/index.mdx
index 2674f6680..c62b4fcdd 100644
--- a/packages/questions/user-interface/progress-bars/index.mdx
+++ b/packages/questions/user-interface/progress-bars/index.mdx
@@ -14,6 +14,7 @@ difficulty: easy
 frameworks: [react]
 next_questions:
   - progress-bars-ii
+topics: [async]
 ---
 
 Build an app where clicking the "Add" button adds progress bars to the page. The progress bars fill up gradually as soon as they are shown.
diff --git a/packages/questions/user-interface/stopwatch/index.mdx b/packages/questions/user-interface/stopwatch/index.mdx
index 1f70eaedf..2be735b6d 100644
--- a/packages/questions/user-interface/stopwatch/index.mdx
+++ b/packages/questions/user-interface/stopwatch/index.mdx
@@ -14,6 +14,7 @@ difficulty: medium
 frameworks: [react, vanilla, angular, vue, svelte]
 similar_questions:
   - digital-clock
+topics: [async]
 ---
 
 Build a stopwatch widget which can measure how much time has passed. It shows the current timer and has two buttons underneath: "Start/Stop" and "Reset".
diff --git a/packages/questions/user-interface/tabs-ii/index.mdx b/packages/questions/user-interface/tabs-ii/index.mdx
index 9422a7334..f6d772b8b 100644
--- a/packages/questions/user-interface/tabs-ii/index.mdx
+++ b/packages/questions/user-interface/tabs-ii/index.mdx
@@ -15,6 +15,7 @@ frameworks: [react, vanilla, angular, vue]
 framework_default: react
 next_questions:
   - tabs-iii
+topics: [a11y]
 ---
 
 **Note:** This is an advanced version of [Tabs](/questions/user-interface/tabs), you should complete that question first before attempting this question.
diff --git a/packages/questions/user-interface/tabs-iii/index.mdx b/packages/questions/user-interface/tabs-iii/index.mdx
index 0aa941dcb..5ee2e91aa 100644
--- a/packages/questions/user-interface/tabs-iii/index.mdx
+++ b/packages/questions/user-interface/tabs-iii/index.mdx
@@ -12,6 +12,7 @@ published: true
 importance: low
 difficulty: medium
 frameworks: [react, angular, vue]
+topics: [a11y]
 ---
 
 **Note:** This is an advanced version of [Tabs II](/questions/user-interface/tabs-ii), you should complete that question first before attempting this question. This question is not available in Vanilla JavaScript as it will require a fair bit of code to add keyboard interactions without a JavaScript framework.
diff --git a/packages/questions/user-interface/tabs/index.mdx b/packages/questions/user-interface/tabs/index.mdx
index 59a5c5479..d4fe27760 100644
--- a/packages/questions/user-interface/tabs/index.mdx
+++ b/packages/questions/user-interface/tabs/index.mdx
@@ -16,6 +16,7 @@ frameworks: [react, vanilla, angular, vue]
 framework_default: react
 next_questions:
   - tabs-ii
+topics: [a11y]
 ---
 
 Build a tabs component that displays one panel of content at a time depending on the active tab element. Some HTML is provided for you as example contents.
diff --git a/packages/questions/user-interface/tic-tac-toe-ii/index.mdx b/packages/questions/user-interface/tic-tac-toe-ii/index.mdx
index db7c4c1cb..eed17b7de 100644
--- a/packages/questions/user-interface/tic-tac-toe-ii/index.mdx
+++ b/packages/questions/user-interface/tic-tac-toe-ii/index.mdx
@@ -11,6 +11,7 @@ published: true
 importance: low
 difficulty: hard
 frameworks: [react, angular, vue, svelte]
+topics: [a11y]
 ---
 
 **Note:** This is an advanced version of [Tic-tac-toe](/questions/user-interface/tic-tac-toe), you should complete that question first before attempting this question.
diff --git a/packages/questions/user-interface/tic-tac-toe/index.mdx b/packages/questions/user-interface/tic-tac-toe/index.mdx
index 2baf25e74..a0a7cb484 100644
--- a/packages/questions/user-interface/tic-tac-toe/index.mdx
+++ b/packages/questions/user-interface/tic-tac-toe/index.mdx
@@ -13,6 +13,7 @@ difficulty: medium
 frameworks: [react, angular, vue, svelte]
 next_questions:
   - tic-tac-toe-ii
+topics: [a11y]
 ---
 
 > Tic-tac-toe is a game for two players who take turns making space in a three-by-three grid with X or O. The player who succeeds in playing three of their marks in a horizontal, vertical, or diagonal row is the winner.
diff --git a/packages/questions/user-interface/traffic-light/index.mdx b/packages/questions/user-interface/traffic-light/index.mdx
index 964b0d6d6..d7e07bb2c 100644
--- a/packages/questions/user-interface/traffic-light/index.mdx
+++ b/packages/questions/user-interface/traffic-light/index.mdx
@@ -14,6 +14,7 @@ difficulty: medium
 frameworks: [react, vanilla, angular, vue, svelte]
 similar_questions:
   - digital-clock
+topics: [async]
 ---
 
 Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:
diff --git a/packages/questions/user-interface/transfer-list-ii/a11y.mdx b/packages/questions/user-interface/transfer-list-ii/a11y.mdx
index cadda3a14..3f7ef3de2 100644
--- a/packages/questions/user-interface/transfer-list-ii/a11y.mdx
+++ b/packages/questions/user-interface/transfer-list-ii/a11y.mdx
@@ -1,4 +1,4 @@
-## A11y
+## Accessibility
 
 - Use of `<form>` submit for adding new items to the list.
 - `<input type="checkbox">` are paired with `<label>`s. Clicking on labels also selects/deselect the item.
diff --git a/packages/questions/user-interface/transfer-list/a11y.mdx b/packages/questions/user-interface/transfer-list/a11y.mdx
index d18170002..0e4f44865 100644
--- a/packages/questions/user-interface/transfer-list/a11y.mdx
+++ b/packages/questions/user-interface/transfer-list/a11y.mdx
@@ -1,4 +1,4 @@
-## A11y
+## Accessibility
 
 - `<input type="checkbox">` are paired with `<label>`s. Clicking on labels also selects/deselect the item.
 - Since the `<button>`s do not have a visible label, use `aria-label`s to indicate their purpose. As a result, make the button contents hidden from screen readers via `aria-hidden="true"`.
diff --git a/packages/questions/user-interface/users-database/a11y.mdx b/packages/questions/user-interface/users-database/a11y.mdx
index 7f28be034..7b01d5017 100644
--- a/packages/questions/user-interface/users-database/a11y.mdx
+++ b/packages/questions/user-interface/users-database/a11y.mdx
@@ -1,4 +1,4 @@
-## A11y
+## Accessibility
 
 - Use of `<form>` submit for performing actions.
 - `<input type="text">` are paired with `<label>`s. Clicking on labels also focuses the input.
diff --git a/submodules/front-end-interview-handbook b/submodules/front-end-interview-handbook
index 66bb6dbda..cdcde3882 160000
--- a/submodules/front-end-interview-handbook
+++ b/submodules/front-end-interview-handbook
@@ -1 +1 @@
-Subproject commit 66bb6dbda242d4ee243b775b0c51611ed272cf0d
+Subproject commit cdcde3882b71bca79b8a88a4f709e55fb5731264
diff --git a/submodules/top-javascript-interview-questions b/submodules/top-javascript-interview-questions
index c37899bc8..65400de49 160000
--- a/submodules/top-javascript-interview-questions
+++ b/submodules/top-javascript-interview-questions
@@ -1 +1 @@
-Subproject commit c37899bc87b712ba740a909cb6cb2986e9a9d791
+Subproject commit 65400de4917902b9386c2a3ad455fd248fa7bf7d